body {
  font-family: sans-serif;
}

.toggle-check-input {
  width: 1px;
  height: 1px;
  position: absolute;
}

.toggle-check-text {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  background: #CCC;
  padding: 0.50em 2.5em 0.45em 2em;
  border-radius: 1em;
  min-width: 2em;
  color: #FFF;
  cursor: pointer;
  transition: background-color 0.15s;
  margin-bottom: 20px;
}

.toggle-check-text:after {
  content: ' ';
  display: block;
  background: #FFF;
  width: 1.1em;
  height: 1.1em;
  border-radius: 1em;
  position: absolute;
  left: 0.45em;
  top: 0.65em;
  transition: left 0.15s, margin-left 0.15s;
}

.toggle-check-text:before {
  content: 'НЕТ';
}

.toggle-check-input:checked ~ .toggle-check-text {
  background: #5bc0de;
  padding-left: 2.5em;
  padding-right: 2em;
}

.toggle-check-input:checked ~ .toggle-check-text:before {
  content: 'ДА';
}

.toggle-check-input:checked ~ .toggle-check-text:after {
  left: 100%;
  margin-left: -1.5em;
}

.toggle-check-input2 {
  width: 1px;
  height: 1px;
  position: absolute;
}

.toggle-check-text2 {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  background: #CCC;
  padding: 1.50em 1.80em 0.45em 2em;
  border-radius: 1em;
  min-width: 2em;
  color: #FFF;
  cursor: pointer;
  transition: background-color 0.15s;
  margin-bottom: -8px;
}

.toggle-check-text2:after {
  content: ' ';
  display: block;
  background: #FFF;
  width: 1.1em;
  height: 1.1em;
  border-radius: 1em;
  position: absolute;
  left: 0.45em;
  top: 0.45em;
  transition: left 0.15s, margin-left 0.15s;
}

.toggle-check-text2:before {
  content: ' ';
}

.toggle-check-input2:checked ~ .toggle-check-text2 {
  background: #5bc0de;
  padding-left: 1.80em;
  padding-right: 2em;
}

.toggle-check-input2:checked ~ .toggle-check-text2:before {
  content: ' ';
}

.toggle-check-input2:checked ~ .toggle-check-text2:after {
  left: 100%;
  margin-left: -1.5em;
}