.switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.toggle-switch input {
  display: none;
}
.toggle-switch label {
  display: block;
  width: 40px;
  height: 18px;
  background-color: gray;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  margin: 0 0.3em;
  transition: all 0.5s ease-in-out;
}
.toggle-switch label:after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: black;
  top: 2px;
  right: 3px;
  border-radius: 100%;
  transition: all 0.5s linear;
}
/* .day .toggle-switch label:after {
    left: 3px;
  } */
input:checked + label {
  background-color: rgb(184, 247, 184);
  transition: all 0.5s ease-in-out;
}
input:checked + label:after {
  left: 3px;
  transition: all 0.5s linear;
}