/*
 * One dropdown arrow everywhere, 12px in from the right edge.
 *
 * Browsers inset their native arrow by different amounts, and Chrome's sits
 * almost on the edge, so every single-choice <select> draws the arrow the
 * clinician's forms already use. Linked last in each page's head: it wins
 * over a component's own background shorthand, which would otherwise leave
 * the select with no arrow at all.
 *
 * Opted out, because they draw their own arrow: the secure booking and slot
 * picker selects (an arrow on the wrapper, as far in as their text), the
 * case summary's speed menu (9px in, as its text is), and the video call's
 * device pickers (a white arrow for the dark call screen).
 */
select:not([multiple]):not([size]):not(.sb-select, .bsp-day-select, .atlas-cs-audio-rate, .device-group select) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236d8d86' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 32px;
}