@charset "UTF-8";
.toggler-wrapper {
  display: block;
  width: 45px;
  height: 25px;
  cursor: pointer;
  position: relative;
}

.toggler-wrapper input[type="checkbox"] {
  display: none;
}

.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider {
  background-color: #44cc66;
}

.toggler-wrapper .toggler-slider {
  background-color: #ccc;
  position: absolute;
  border-radius: 100px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.toggler-wrapper .toggler-knob {
  position: absolute;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.toggler-wrapper.style-23 input[type="checkbox"]:checked+.toggler-slider {
  background-color: transparent;
  border-color: #44cc66;
}

.toggler-wrapper.style-23 input[type="checkbox"]:checked+.toggler-slider:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.7;
}

.toggler-wrapper.style-23 input[type="checkbox"]:checked+.toggler-slider:after {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.toggler-wrapper.style-23 input[type="checkbox"]:checked+.toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px);
  background-color: #44cc66;
}

.toggler-wrapper.style-23 .toggler-slider {
  background-color: transparent;
  border: 2px solid #eb4f37;
}

.toggler-wrapper.style-23 .toggler-slider:before {
  content: 'SI QUIERO';
  position: absolute;
  top: 0px;
  right: -80px;
  font-size: 75%;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

.toggler-wrapper.style-23 .toggler-slider:after {
  content: 'NO QUIERO';
  position: absolute;
  top: 0px;
  right: -80px;
  font-size: 75%;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.toggler-wrapper.style-23 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #eb4f37;
}


/* Customize the label (the container) */
.container2 {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Hide the browser's default checkbox */
.container2 input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container2 input:checked ~ .checkmark {
background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.container2 input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.container2 .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}