.toggle {
  --track-width: 90px;
  --track-height: 40px;
  --track-radius: 10px;
  --thumb-size: 30px;
  --thumb-radius: 15%;
  --thumb-offset: 5px;
  --track-bg-off: #0a0a0a;
  --track-bg-on: #012a32;
  --thumb-bg-off: #444444;
  --thumb-bg-on: #00c8ff;
  --track-fontsize: 10px;
  --anim-style: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --text-pos: 12px;
  --track-border-width: 2px;
  --track-b-color-off: #757575;
  --track-b-color-on: #00e0e0;
  --txt-color-on: #00ffff;
  --txt-color-off: #444444;
  display: inline-flex; align-items: center; cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.track {
  width: var(--track-width); 
  height: var(--track-height);
  background: var(--track-bg-off);
  border: var(--track-border-width) solid var(--track-b-color-off);
  border-radius: var(--track-radius);
  position: relative; 
  transition: var(--anim-style);
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 0 var(--text-pos); 
  box-sizing: border-box;
  margin: 0;
}
.thumb {
  position: absolute; 
  width: var(--thumb-size); 
  height: var(--thumb-size);
  background: var(--thumb-bg-off);
  border-radius: var(--thumb-radius);
  top: 50%; 
  left: var(--thumb-offset); 
  transform: translateY(-50%); 
  transition: var(--anim-style);
}
.lbl { font-size: var(--track-fontsize); font-family: sans-serif; transition: opacity var(--anim-style); font-weight: 800; }
.on { color: var(--txt-color-on); opacity: 0; white-space: nowrap;}
.off { color: var(--txt-color-off); opacity: 1; white-space: nowrap;}
input.toggleIn:checked + .track { background: var(--track-bg-on); border-color: var(--track-b-color-on); }
input.toggleIn:checked + .track .thumb { left: calc(100% - var(--thumb-size) - var(--thumb-offset)); background: var(--thumb-bg-on); border-color: var(--thumb-b-color-on); }
input.toggleIn:checked + .track .on { opacity: 1; }
input.toggleIn:checked + .track .off { opacity: 0; }

.modal .toggle-switch-con {
  --toggle-p-margin: 1vw;
  --toggle-con-padding: 2.5vw;
  width: 100%;
  height: fit-content;
  padding: 5px var(--toggle-con-padding);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 2vh 0;
  margin-bottom: 0;
}
.modal .toggle-switch-con:last-child {
  margin-bottom: 2vh;
}
.toggle-switch-con p {
  padding: 0;
  margin: 0;
  margin-right: var(--toggle-p-margin);
  color: white;
  font-size: 125%;
}