.fg-switch-button {
  position: relative;

  display: inline-block;

  width: 40px;
  height: 20px;

  margin: 0;
}

.fg-switch-button-checkbox {
  display:none;
}

.fg-switch-button-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  border: 1.5px solid #DDDDDD;
  border-radius: 20px;

  cursor: pointer;
  background-color: transparent;

  transition: all .4s ease;
}

.fg-switch-button--dark-theme .fg-switch-button-slider {
  border-color: #555555;
}

.fg-switch-button-slider:before {
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 1.5px;

  border-radius: 50%;
  background-color: #BBBBBB;

  content: "";

  transition: all .4s ease;
}

.fg-switch-button--dark-theme .fg-switch-button-slider:before {
  background-color: #777777;
}

.fg-switch-button-checkbox:checked + .fg-switch-button-slider {
  border: 1.5px solid #7DD3C0;

  background-color: #FFFFFF;
}

.fg-switch-button-checkbox:checked + .fg-switch-button-slider:before {
  background-color: #08B58E;

  transform: translateX(18px);
}