.dnetor-toggle-switch.dnetor-toggle-switch-layout-01 {
  --wrap_width: 50px;
  --wrap_height: 24px;
  --dot_width: 18px;
  --dot_height: 18px;
  --distance_to_border: 2px;
  --wrap_width_var: 50;
  --dot_width_var: 18;
  --distance_to_border_var: 2;
  --color_label_active: "#08C16A";
  --color_label_normal: "#fff";
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-01 .dnetor-toggle-switch-header {
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto;
  color: #111;
  font-weight: 500;
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-01 .dnetor-toggle-switch-checkbox {
  position: relative;
  width: var(--wrap_width);
  height: var(--wrap_height);
  -webkit-appearance: none;
  appearance: none;
  background: #ddd;
  outline: none;
  border-radius: 2rem;
  cursor: pointer;
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-01 .dnetor-toggle-switch-checkbox:before {
  content: "";
  width: var(--dot_width);
  height: var(--dot_height);
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  transition: 0.5s;
  margin-left: var(--distance_to_border);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-01 .dnetor-toggle-switch-checkbox:checked {
  background-color: var(--e-global-color-accent);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-01 .dnetor-toggle-switch-checkbox:checked:before {
  transform: translate(calc((var(--wrap_width_var, 120) - var(--dot_width_var, 40) - var(--distance_to_border_var, 3) * 2) / var(--dot_width_var, 40) * 100%), -50%);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 {
  --wrap_width: 260px;
  --wrap_height: 60px;
  --dot_width: 118px;
  --dot_height: 44px;
  --distance_to_border: 7px;
  --wrap_width_var: 260;
  --dot_width_var: 118;
  --distance_to_border_var: 7;
  --color_label_active: #fff;
  --color_label_normal: var(--e-global-color-accent);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  width: var(--wrap_width);
  height: var(--wrap_height);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-switch-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-switch-checkbox + .dnetor-toggle-slider {
  background-color: white;
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-switch-checkbox:checked + .dnetor-toggle-slider:before {
  transform: translate(calc((var(--wrap_width_var, 260) - var(--dot_width_var, 118) - var(--distance_to_border_var, 7) * 2) / var(--dot_width_var, 118) * 100%), -50%);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-slider:before {
  position: absolute;
  content: "";
  height: var(--dot_height);
  width: var(--dot_width);
  left: var(--distance_to_border);
  background-color: var(--e-global-color-accent);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50px;
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-switch-first {
  position: absolute;
  top: 50%;
  left: var(--distance_to_border);
  transform: translateY(-50%);
  display: block;
  width: var(--dot_width);
  text-align: center;
  color: var(--color_label_normal);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-switch-first.label-active {
  color: var(--color_label_active);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-switch-last {
  position: absolute;
  top: 50%;
  right: var(--distance_to_border);
  transform: translateY(-50%);
  display: block;
  width: var(--dot_width);
  text-align: center;
  color: var(--color_label_normal);
}
.dnetor-toggle-switch.dnetor-toggle-switch-layout-02 .dnetor-toggle-switch-header .dnetor-toggle-switch-last.label-active {
  color: var(--color_label_active);
}
.dnetor-toggle-switch .dnetor-toggle-description {
  text-align: center;
  color: var(--e-global-color-accent);
  margin-top: 18px;
}
.dnetor-toggle-switch .dnetor-toggle-content {
  padding-top: 35px;
}

/*# sourceMappingURL=toggle-switch.css.map */