.ckbx-style-1 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-1 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-1 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-1 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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



.ckbx-style-2 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-2 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-2 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-2 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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



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

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

.ckbx-style-3 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-3 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-3 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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



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

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

.ckbx-style-4 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-4 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-4 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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




.ckbx-style-5 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-5 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-5 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-5 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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




.ckbx-style-6 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-6 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-6 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-6 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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


/* */
.ckbx-style-7 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-7 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-7 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-7 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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

/* */
.ckbx-style-8 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-8 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-8 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-8 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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


/* */
.ckbx-style-9 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-9 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-9 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-9 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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

/* */
.ckbx-style-10 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-10 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-10 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-10 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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

/* */
.ckbx-style-11 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-11 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-11 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-11 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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


/* */
.ckbx-style-12 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-12 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-12 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-12 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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


/* */
.ckbx-style-13 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-13 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-13 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-13 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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

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

.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 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-15 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-15 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-15 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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

/* */
.ckbx-style-16 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-16 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-16 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-16 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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

.ckbx-style-17 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-17 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-17 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-17 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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

.ckbx-style-18 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
  max-width: 102px;
}

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

.ckbx-style-18 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-18 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-18 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

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