.dm {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode-toggle-checkbox {
  display: none;
}

.dark-mode-toggle-label {
  width: 60px;
  height: 30px;
  background: #96dcee;
  border-radius: 30px;
  border: 2px solid #72cce3;
  display: flex;
  position: relative;
  cursor: pointer;
  transition: all 0.35s ease-in;
  box-sizing: border-box;
  margin: 0;
}

.dark-mode-toggle-label:before {
  content: '';
  width: 24px;
  height: 24px;
  border: 2px solid #f5eb71;
  border-radius: 50%;
  background: #fffaa8;
  position: absolute;
  top: 2px;
  left: 3px;
  transition: all 0.35s ease-in;
  box-sizing: border-box;
}

.dark-mode-toggle-label-background {
  width: 4px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  position: relative;
  left: 40px;
  top: 13px;
  transition: all 0.15s ease-in;
}

.dark-mode-toggle-label-background:before,
.dark-mode-toggle-label-background:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: all 0.15s ease-in;
}

.dark-mode-toggle-label-background:before {
  top: -4px;
  left: -8px;
}

.dark-mode-toggle-label-background:after {
  top: 4px;
  left: -4px;
}

/* Checked state - Dark mode styles */

.dark-mode-toggle-checkbox:checked + .dark-mode-toggle-label {
  background: #6b7abb;
  border-color: #5d6baa;
}

.dark-mode-toggle-checkbox:checked + .dark-mode-toggle-label:before {
  background: #fff;
  border-color: #e8e8ea;
  left: 28px;
  width: 24px;
  height: 24px;
}

.dark-mode-toggle-checkbox:checked + .dark-mode-toggle-label:after {
  content: '';
  position: absolute;
  box-shadow: #e8e8ea -4px 0 0 1.5px, #e8e8ea -8px 7px 0 -1px;
  left: 50px;
  top: 9px;
  width: 4px;
  height: 4px;
  background: transparent;
  border-radius: 50%;
  opacity: 1;
  transition: all 0.25s ease-in 0.35s;
}

.dark-mode-toggle-checkbox:checked + .dark-mode-toggle-label .dark-mode-toggle-label-background {
  left: 17px;
  width: 2px;
  height: 2px;
  top: 18px;
}

.dark-mode-toggle-checkbox:checked + .dark-mode-toggle-label .dark-mode-toggle-label-background:before {
  width: 2px;
  height: 2px;
  top: -8px;
  left: 0;
}

.dark-mode-toggle-checkbox:checked + .dark-mode-toggle-label .dark-mode-toggle-label-background:after {
  width: 2px;
  height: 2px;
  left: -8px;
  top: -5px;
}