.etl-page {
  --etl-heading-font: "Poppins", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --etl-input-bg: #f1eff0;
  --etl-input-border: #808890;
}

/* Keep the embedded application within the customer iframe width. */
.etl-page.container-fluid {
  max-width: 904px;
}

.etl-page > h2 {
  font-size: 2.25rem;
}

.etl-page .nav-link,
.etl-page .btn:not(.popover-btn) {
  font-family: var(--etl-heading-font);
}

.etl-plot-panel {
  min-height: 450px;
}

/* roboplotr measures modebar height to reserve space above the title. */
.etl-page .js-plotly-plot .plotly .modebar {
  padding-bottom: 1rem;
}

#settings_panel {
  overflow: visible;
}

#settings_panel .selectize-input,
#settings_panel .selectize-dropdown {
  border-color: var(--etl-input-border);
}

#settings_panel .selectize-dropdown {
  background-color: var(--etl-input-bg);
}

#settings_panel .selectize-dropdown-content {
  max-height: 400px;
}

#settings_panel .selectize-input.focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

#settings_panel .input-daterange .input-group-text {
  background-color: var(--etl-input-bg);
}

.popover-btn {
  --bs-btn-color: rgba(var(--bs-emphasis-color-rgb), 0.83);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--etl-input-border);
  --bs-btn-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.83);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: rgba(var(--bs-emphasis-color-rgb), 0.83);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  font-family: var(--bs-body-font-family);
  font-size: 0.9375rem;
  font-weight: 400;
  padding: 0.375rem 1rem 0.375rem 0.75rem;
}

/* Match Selectize's fixed caret size without font-relative rounding. */
.popover-btn.dropdown-toggle::after {
  border-width: 5px 5px 0;
}

.popover-btn[aria-expanded="true"] {
  background-color: #fff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.popover-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

#settings_panel .etl-popover .tippy-tooltip {
  max-height: min(800px, 100vw, calc(100vh - 2rem));
  color: var(--bs-body-color);
  background-color: var(--etl-input-bg);
  border: var(--bs-border-width) solid var(--etl-input-border);
  border-radius: var(--bs-border-radius);
  overflow-y: auto;
  box-shadow: var(--bs-box-shadow-sm);
}

#settings_panel .etl-popover .treejs-node {
  font-size: 0.9375rem;
}

#settings_panel .etl-popover .treejs .treejs-checkbox:hover::before {
  box-shadow: 0 0 2px 1px var(--bs-primary);
}

#settings_panel
  .etl-popover
  .treejs
  .treejs-node__checked
  > .treejs-checkbox::before,
#settings_panel
  .etl-popover
  .treejs
  .treejs-node__halfchecked
  > .treejs-checkbox::before {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

#settings_panel .etl-popover .treejs .treejs-label {
  padding-left: 0.3125rem;
}

.etl-compare-button {
  height: 36.4px;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.etl-compare-button.btn-outline-success {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--etl-input-border);
}

.etl-compare-button.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
}

.etl-share-url {
  resize: none;
}

.etl-info-detail {
  font-size: 75%;
}