.yellow-site input.switch:checked::before {
  background: #f6b913;
}

.blue-site input.switch:checked::before {
  background: #47adf0;
}

.green-site input.switch:checked::before {
  background: #8cc740;
}

.pink-site input.switch:checked::before {
  background: #ed008c;
}

/* ---------- Swich  ---------- */
.switch input {
  font-size: 2em;
  /*<-  change size*/
  display: inline-flex;
  align-items: center;
  width: 2.2em;
  position: relative;
  margin: 0.3em 0;
  height: auto;
  cursor: pointer;
}

.date-switch-row.switch input {
  font-size: 1.2em;
}

.switch input::before {
  content: "";
  display: inline-flex;
  position: absolute;
  height: 0.8em;
  width: 1.4em;
  padding: 0 0.2em;
  background: #faf9f6;
  border: 4px solid black;
  border-radius: 1em;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
}

.switch input:checked:before {
  border: 4px solid #f6b913;
}

.switch input::after {
  content: "";
  display: inline-flex;
  position: absolute;
  height: 0.5em;
  width: 0.5em;
  margin: 0 0.5rem;
  border-radius: 1em;
  background: black;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
}

.switch input:checked::after {
  background: white;
}

.switch input:checked::after {
  -webkit-transform: translateX(2rem);
  -moz-transform: translateX(2rem);
  transform: translateX(2rem);
}

.switch input:checked::before {
  background: #f6b913;
}

.switch input:disabled::before,
.switch input:disabled::after {
  background: #ccc;
  cursor: not-allowed;
}

/* End Swich*/