/* HTNS v258 — cool-blue toggle switches across the app. */
#mainApp .toggle,
#modal .toggle{
  position:relative !important;
}

#mainApp .toggle-ui,
#modal .toggle-ui,
#mainApp #view-profile #notificationsCard .toggle-ui,
#modal #notificationsCard .toggle-ui{
  box-sizing:border-box !important;
  background:#e7f0f7 !important;
  background-image:none !important;
  border:1px solid #a9bfd1 !important;
  box-shadow:none !important;
  filter:none !important;
}

#mainApp .toggle-ui::before,
#modal .toggle-ui::before,
#mainApp #view-profile #notificationsCard .toggle-ui::before,
#modal #notificationsCard .toggle-ui::before{
  background:#ffffff !important;
  border:1px solid #bfd2e1 !important;
  box-shadow:none !important;
}

#mainApp .toggle input:checked + .toggle-ui,
#modal .toggle input:checked + .toggle-ui,
#mainApp #view-profile #notificationsCard .toggle input:checked + .toggle-ui,
#modal #notificationsCard .toggle input:checked + .toggle-ui{
  background:#78b5df !important;
  background-image:none !important;
  border-color:#4f91c7 !important;
  box-shadow:none !important;
}

#mainApp .toggle input:checked + .toggle-ui::before,
#modal .toggle input:checked + .toggle-ui::before,
#mainApp #view-profile #notificationsCard .toggle input:checked + .toggle-ui::before,
#modal #notificationsCard .toggle input:checked + .toggle-ui::before{
  background:#ffffff !important;
  border-color:#d7e8f4 !important;
  box-shadow:none !important;
}

#mainApp .toggle input:focus-visible + .toggle-ui,
#modal .toggle input:focus-visible + .toggle-ui{
  outline:2px solid rgba(47,111,152,.22) !important;
  outline-offset:2px !important;
}

#mainApp .toggle input:disabled + .toggle-ui,
#modal .toggle input:disabled + .toggle-ui{
  opacity:.5 !important;
}

html[data-theme="dark"] #mainApp .toggle-ui,
html[data-theme="dark"] #modal .toggle-ui,
html.htns-theme-v234[data-theme="dark"] #mainApp .toggle-ui,
html.htns-theme-v234[data-theme="dark"] #modal .toggle-ui{
  background:#28485e !important;
  border-color:#567b92 !important;
}

html[data-theme="dark"] #mainApp .toggle-ui::before,
html[data-theme="dark"] #modal .toggle-ui::before,
html.htns-theme-v234[data-theme="dark"] #mainApp .toggle-ui::before,
html.htns-theme-v234[data-theme="dark"] #modal .toggle-ui::before{
  background:#eaf5fb !important;
  border-color:#7ea4bb !important;
}

html[data-theme="dark"] #mainApp .toggle input:checked + .toggle-ui,
html[data-theme="dark"] #modal .toggle input:checked + .toggle-ui,
html.htns-theme-v234[data-theme="dark"] #mainApp .toggle input:checked + .toggle-ui,
html.htns-theme-v234[data-theme="dark"] #modal .toggle input:checked + .toggle-ui{
  background:#3f82b3 !important;
  border-color:#6aa7cf !important;
}