body { padding-bottom: 40px; }
.card { border-radius: 10px; }
@media (max-width: 576px) {
  .card { margin: 0 6px; }
}
/* SWITCH CONTAINER */
.switch {
  position: relative;
  display: inline-block;
  width: 124px;
  height: 34px;
}

/* HIDE INPUT */
.switch input {
  display: none;
}

/* SLIDER BACKGROUND */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 34px;
  background-color: #dc3545; /* default red */
  color: white;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center; /* text centered */
  padding: 0 10px;
  transition: .4s;
}

/* CIRCLE */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  background-color: #fff;
  border-radius: 50%;
  bottom: 4px;
  transition: .4s;
}

/* ACTIVE = GREEN + CIRCLE LEFT */
.slider.active {
  background-color: #28a745;
}

.slider.active:before {
  left: 4px;
}

/* INACTIVE = RED + CIRCLE RIGHT */
.slider.inactive {
  background-color: #dc3545;
}

.slider.inactive:before {
  right: 4px;
}