/* "Schedule a demo" forms (templates/partials/demo_form.html). Not part of the live CSS bundle:
   the live Country/State pickers were react-select widgets styled by emotion at runtime; these
   rules make a native <select> look like that control (38px, hsl(0,0%,80%) border, 4px radius,
   separator + chevron indicator). */
.wh-select { position: relative; color: hsl(0, 0%, 20%); }
.wh-select select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: block; width: 100%; min-height: 38px; margin: 0;
  padding: 2px 46px 2px 10px; border: 1px solid hsl(0, 0%, 80%); border-radius: 4px;
  background: hsl(0, 0%, 100%); color: hsl(0, 0%, 20%); font: inherit; line-height: normal;
  cursor: default; outline: 0; transition: all 100ms; text-overflow: ellipsis;
}
.wh-select select:hover { border-color: hsl(0, 0%, 70%); }
.wh-select select:focus { border-color: #2684ff; box-shadow: 0 0 0 1px #2684ff; }
/* indicator separator */
.wh-select::before {
  content: ""; position: absolute; right: 36px; top: 8px; bottom: 8px; width: 1px;
  background: hsl(0, 0%, 80%); pointer-events: none;
}
/* dropdown chevron (react-select's 20x20 svg) */
.wh-select::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='hsl(0,0%25,80%25)'%3E%3Cpath d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
.wh-select:hover::after { filter: brightness(0.75); }

[data-demo-form] button[disabled] { opacity: .65; }