/* iOS-style toggle switch, used on push notification settings */
.ios-toggle { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; }
.ios-toggle input { opacity: 0; width: 0; height: 0; }
.ios-toggle .slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #E5E5E7; transition: .4s; border-radius: 31px;
}
.ios-toggle .slider:before {
  position: absolute; content: ""; height: 27px; width: 27px; left: 2px; bottom: 2px;
  background-color: white; transition: .4s; border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.ios-toggle input:checked + .slider { background-color: #3182F6; }
.ios-toggle input:checked + .slider:before { transform: translateX(20px); }

/* Custom range slider, used on push notification importance setting */
.custom-range { -webkit-appearance: none; }
.custom-range::-webkit-slider-runnable-track { background: #E5E8EB; height: 6px; border-radius: 3px; }
.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.2); margin-top: -9px; cursor: pointer;
}

.input-focus-ring { transition: box-shadow 0.2s ease-in-out; }
.input-focus-ring:focus-within { box-shadow: 0 0 0 2px #3182F6; }