.csp-progress {
  display: block;
  width: 100%;
  border: 0;
  appearance: none;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
.csp-progress::-webkit-progress-bar { background: #e5e7eb; border-radius: 9999px; }
.csp-progress::-webkit-progress-value { background: #4f46e5; border-radius: 9999px; }
.csp-progress::-moz-progress-bar { background: #4f46e5; border-radius: 9999px; }
.csp-progress-job { height: 1.5rem; }
.csp-progress-onboarding { height: 1rem; }
.csp-colour-swatch {
  width: .75rem;
  height: .75rem;
  padding: 0;
  border: 0;
  vertical-align: middle;
}
.csp-colour-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.csp-colour-swatch::-webkit-color-swatch { border: 1px solid #d1d5db; border-radius: 9999px; }
.scheduler-columns th:nth-child(1) { width: 22%; }
.scheduler-columns th:nth-child(2), .scheduler-columns th:nth-child(3), .scheduler-columns th:nth-child(7) { width: 13%; }
.scheduler-columns th:nth-child(4) { width: 12%; }
.scheduler-columns th:nth-child(5) { width: 9%; }
.scheduler-columns th:nth-child(6) { width: 7%; }
.scheduler-columns th:nth-child(8) { width: 11%; }
.exporter-columns th:nth-child(1), .exporter-columns th:nth-child(7) { width: 18%; }
.exporter-columns th:nth-child(2), .exporter-columns th:nth-child(3) { width: 12%; }
.exporter-columns th:nth-child(4) { width: 10%; }
.exporter-columns th:nth-child(5) { width: 8%; }
.exporter-columns th:nth-child(6) { width: 7%; }
.exporter-columns th:nth-child(8) { width: 15%; }
.csp-wrap-anywhere { overflow-wrap: anywhere; }
.csp-muted-option { color: #9ca3af; }
.csp-option-default { color: #111827; }
select.csp-muted-option option { color: #111827; }
.csp-fading { opacity: 0; transition: opacity .5s ease; }
.csp-disabled-opacity { opacity: .5; }
.csp-flex-auto { flex: 0 0 auto; }

/* Smartphones and small tablets (hamburger menu): the header stays frozen at the top of the screen,
   so the menu under the three dashes can be opened from anywhere on the page.
   z-index 35: above sticky table columns (z-30), below table cards/editors (z-40) and modals (z-50). */
@media (max-width: 767.98px) {
  html { scroll-padding-top: 4.5rem; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 35;
    background-color: #fff;
  }
  /* A long open menu scrolls inside the screen instead of being cut off below it. */
  .site-header #mobile-menu {
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}