.header-switches {
  margin:8px 0 18px;
  border:1px solid #514b3b;
  border-radius:10px;
  padding:3px 12px;
  background:#292a2d
}
.header-switches .header-switch {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:11px 0;
  font-size:12px;
  line-height:1.4;
  color:#d1dbec;
  cursor:pointer;
  border-bottom:1px solid #ffffff0a
}
.header-switches .header-switch:last-child {
  border-bottom:0
}
.header-switch-control {
  display:flex;
  position:relative;
  align-items:center;
  gap:7px;
  flex-shrink:0
}
.header-switch-control input {
  position:absolute;
  opacity:0;
  width:38px;
  height:24px;
  left:0;
  top:0;
  margin:0;
  padding:0;
  cursor:pointer
}
.header-switch-track {
  display:block;
  width:38px;
  height:22px;
  border:1px solid #56647a;
  background:#3b3b3c;
  border-radius:20px;
  pointer-events:none;
  transition:background .15s
}
.header-switch-track:after {
  content:'';
  display:block;
  width:14px;
  height:14px;
  margin:3px;
  border-radius:50%;
  background:#b4bed0;
  transition:transform .15s
}
.header-switch-control input:checked+.header-switch-track {
  background:#80651c;
  border-color:#e6b84c
}
.header-switch-control input:checked+.header-switch-track:after {
  transform:translateX(16px);
  background:#c8ffe6
}
.header-switch-control input:focus-visible+.header-switch-track {
  outline:2px solid #e6b84c;
  outline-offset:3px
}
.header-switch-state {
  font-size:10px;
  color:#889ab6;
  width:23px
}
.header-switch-state:after {
  content:'OFF'
}
.header-switch-control input:checked~.header-switch-state:after {
  content:'ON';
  color:#f0cc70
}