/* bloomberg.css ─ Bloomberg tab: chart panel, sub-nav, annotations, chart type bar, format panel (also covers cost-/mkt-/eq-fmt-btn variants in one grouped selector — DO NOT split per-tab), stats, ratios, etfs, overlay, alerts, correlation. */

/* ── Bloomberg chart panel ───────────────────────── */
.bb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bb-title {
  font-size: 12px;
  font-weight: 600;
  color: #c9a84c;
  /* Cost-curve titles can run long (e.g. "South Africa, Zimbabwe & North
     America Margin Cost Curve 2030"). Allow wrap rather than overflow so
     nothing gets clipped at narrow task-pane widths. */
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}

/* When the Bloomberg sub-nav is on Indices, hide the PGM + Battery metal
   groups, the lease chart-type button, and the price-related toggles. The
   chart pipeline still renders the same way; we just narrow the metal
   selector to DJI / Nikkei / FTSE. */
.bb-mode-indices .metal-group[data-metal-group="pgm"],
.bb-mode-indices .metal-group[data-metal-group="battery"],
.bb-mode-indices [data-chart-type="lease"],
.bb-mode-indices [data-chart-type="overlay"],
.bb-mode-indices [data-chart-type="candle"] {
  display: none !important;
}
/* When sub-nav is on Prices (the original chart), hide the indices group so
   it sits where the user expects — only DJI / Nikkei / FTSE on Indices, only
   PGM + Battery on Prices. */
.bb-mode-chart .metal-group[data-metal-group="indices"] {
  display: none !important;
}

/* Bloomberg sub-nav — Chart / Stats / Ratios / Correlation / ETFs.
   Sits at the top of the Bloomberg tab; flat chip styling matches the rest
   of the UI (no border, gold pill on active). */
.bb-sub-nav {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: #14171f;
  border-bottom: 1px solid #2a2d3e;
  position: sticky;
  top: 0;
  z-index: 5;
}
.bb-sub-btn {
  -webkit-appearance: none;
  appearance: none;
  padding: 5px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #9aa0b4;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  transition: background 0.12s, color 0.12s;
}
.bb-sub-btn:hover {
  background: #1e2130;
  color: #fff;
}
.bb-sub-btn.active {
  background: rgba(201, 168, 76, 0.16);
  color: #c9a84c;
}

/* Bloomberg annotations panel — per-metal event markers shown on the price
   chart. Add-row + list of existing annotations with ✕ removal. */
.bb-annotations-panel { padding: 6px 0 4px; }
.bb-annotation-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.bb-annotation-add-row input[type="date"] { flex: 0 0 130px; min-width: 110px; }
.bb-annotation-add-row .news-filter-search { flex: 1 1 140px; min-width: 120px; }
/* Optional end-date input — same width as start, but lower-emphasis colour
   so it reads as "extra / optional" at first glance. */
#bb-annotation-end-date { color: #b8bdd0; }
#bb-annotation-end-date:focus { color: #e6e8f0; }
/* Range-style annotations get a coloured left edge from --ann-color (set
   inline per item). Single-point items have no left border. */
.bb-annotation-item-range {
  border-left: 2px solid var(--ann-color, #ff9f1c);
  padding-left: 6px;
}
/* Type select — slightly narrower so the row still fits on common widths. */
.bb-annotation-type-select {
  flex: 0 0 130px;
  padding: 3px 6px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e6e8f0;
  font-size: 11px;
}
.bb-annotation-type-select:focus {
  outline: none;
  border-color: #c9a84c;
}
/* Note textarea — full-width on its own line, auto-grows up to a small cap.
   Keeps the +Add row tidy regardless of how long the note is. */
.bb-annotation-note-input {
  flex: 1 1 100%;
  padding: 4px 6px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e6e8f0;
  font-size: 11px;
  resize: vertical;
  min-height: 22px;
  max-height: 80px;
}
.bb-annotation-note-input:focus {
  outline: none;
  border-color: #c9a84c;
}
/* Show-all / Hide-all toolbar — sits between the +Add row and the list. */
.bb-annotation-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.bb-annotation-tool-btn {
  padding: 3px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  cursor: pointer;
}
.bb-annotation-tool-btn:hover { background: #2a2d3e; color: #e6e8f0; }
/* Inline type chip in each list row — coloured glyph from --ann-color.
   The glyph is small, so we boost its size relative to surrounding text. */
.bb-annotation-item-type {
  font-size: 13px;
  width: 14px;
  text-align: center;
  flex: 0 0 auto;
}
/* Eye icon (visibility toggle) — same treatment as the remove button but in
   the neutral grey accent. Hover bumps to the cost-curve gold for parity
   with the rest of the addin's interactive accents. */
.bb-annotation-item-eye {
  background: transparent;
  border: 0;
  color: #8a8fa3;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.bb-annotation-item-eye:hover { color: #c9a84c; }
/* ✎ Edit-label button — shares the eye-icon treatment. Hover-gold to match
   the rest of the addin's interactive accents. */
.bb-annotation-item-edit {
  background: transparent;
  border: 0;
  color: #8a8fa3;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.bb-annotation-item-edit:hover { color: #c9a84c; }
/* Hidden entry — full row dimmed so the analyst can see at a glance that
   it's not currently rendering, without forgetting it exists. */
.bb-annotation-item-hidden {
  opacity: 0.45;
}
.bb-annotation-item-hidden .bb-annotation-item-label {
  text-decoration: line-through;
}
/* Note row — sits below the main row, styled like a continuation. Wraps
   over multiple lines via word-break so long notes don't blow up the panel. */
.bb-annotation-item-note {
  flex: 1 1 100%;
  margin-top: 3px;
  padding-left: 22px;
  font-size: 10.5px;
  color: #8a8fa3;
  font-style: italic;
  word-break: break-word;
}
.bb-annotation-hint {
  font-size: 10.5px;
  color: #777e92;
  font-style: italic;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(201, 168, 76, 0.06);
  border-left: 2px solid #c9a84c;
  border-radius: 2px;
}
.bb-annotations-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bb-annotation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1d28;
  border: 1px solid #2a2e3e;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 11.5px;
  color: #d8dceb;
}
.bb-annotation-item-date {
  color: #c9a84c;
  font-weight: 600;
  flex: 0 0 90px;
}
.bb-annotation-item-label { flex: 1 1 auto; min-width: 0; }
.bb-annotation-item-remove {
  background: transparent;
  border: none;
  color: #777e92;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}
.bb-annotation-item-remove:hover { color: #ff8080; }

/* ── Chart type bar ──────────────────────────────── */
.chart-type-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.chart-type-btn {
  padding: 4px 14px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.chart-type-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.chart-type-btn.active {
  background: #c9a84c22;
  border-color: #c9a84c;
  color: #c9a84c;
}

#candle-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dma-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.dma-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #b0b6c8;
  margin-right: 2px;
  letter-spacing: 0.5px;
}

.dma-btn {
  padding: 3px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.dma-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.dma-btn.active {
  background: #3a2a6022;
  border-color: #8060c0;
  color: #a080e0;
}

.chart-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: 8px;
}

#bb-table {
  width: 100%;
  border-collapse: collapse;
}

#bb-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #aaa;
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #1e2130;
}

#bb-table td {
  padding: 6px 6px;
  border-bottom: 1px solid #181b25;
  font-size: 12px;
  color: #e8e8e8;
}

#bb-table td:first-child {
  color: #b0b0b0;
  font-size: 11px;
}
#bb-table td:nth-child(2) {
  font-family: 'Consolas', monospace;
  color: #c9a84c;
  font-weight: 600;
}
#bb-table tbody tr:hover {
  background: #1a1d27;
}

/* ── Format panel ────────────────────────────────── */
.fmt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fmt-label {
  font-size: 11px;
  color: #c0c5d8;
  width: 58px;
  flex-shrink: 0;
}

.fmt-group {
  display: flex;
  gap: 4px;
}

/* Flat chip button — used across all Format Export panels (cost / mkt / bb /
   eq) plus the generic .fmt-btn. Borderless so the user-agent <button> outline
   doesn't bleed through. Active state is a low-opacity gold fill, no border. */
.fmt-btn,
.cost-fmt-btn,
.mkt-fmt-btn,
.bb-fmt-btn,
.eq-fmt-btn {
  -webkit-appearance: none;
  appearance: none;
  padding: 3px 10px;
  background: #1a1d27;
  border: none;
  border-radius: 4px;
  color: #9aa0b4;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: background 0.12s, color 0.12s;
}
.fmt-btn:hover,
.cost-fmt-btn:hover,
.mkt-fmt-btn:hover,
.bb-fmt-btn:hover,
.eq-fmt-btn:hover {
  background: #242838;
  color: #fff;
}
.fmt-btn.active,
.cost-fmt-btn.active,
.mkt-fmt-btn.active,
.bb-fmt-btn.active,
.eq-fmt-btn.active {
  background: rgba(201, 168, 76, 0.16);
  color: #c9a84c;
}

.fmt-color {
  width: 36px;
  height: 24px;
  padding: 1px 2px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  cursor: pointer;
}

.fmt-text {
  flex: 1;
  padding: 5px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e8e8e8;
  font-size: 11px;
}

.fmt-text:focus {
  outline: none;
  border-color: #c9a84c;
}
.fmt-text::placeholder {
  color: #c8cde0;
}

.fmt-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #aaa;
  cursor: pointer;
}

.fmt-check-label input[type='checkbox'] {
  accent-color: #c9a84c;
  width: 13px;
  height: 13px;
}

.fmt-num {
  width: 80px;
  padding: 5px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e8e8e8;
  font-size: 11px;
}

.fmt-num:focus {
  outline: none;
  border-color: #c9a84c;
}
.fmt-num::placeholder {
  color: #c8cde0;
}
.fmt-label-ml {
  margin-left: 8px;
}

/* ── Custom date row ─────────────────────────────── */
.custom-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.date-input {
  flex: 1;
  padding: 4px 6px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e8e8e8;
  font-size: 11px;
  color-scheme: dark;
}

.date-input:focus {
  outline: none;
  border-color: #c9a84c;
}

.date-sep {
  color: #b0b6c8;
  font-size: 12px;
}

.date-go {
  flex: none;
  padding: 4px 10px;
  font-size: 11px;
}

/* ── Stats table ─────────────────────────────────── */
#stats-table {
  width: 100%;
  border-collapse: collapse;
}

#stats-table th {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #b8bdd0;
  text-align: right;
  padding: 3px 4px;
  border-bottom: 1px solid #1e2130;
}

#stats-table th:first-child {
  text-align: left;
}

#stats-table td {
  padding: 5px 4px;
  border-bottom: 1px solid #181b25;
  font-size: 10px;
  text-align: right;
  color: #bbb;
  font-family: 'Consolas', monospace;
}

#stats-table td:first-child {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  text-align: left;
  color: #e0e0e0;
  font-size: 11px;
}

#stats-table tbody tr:hover {
  background: #1a1d27;
}

.stats-group-row td {
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b0b6c8 !important;
  padding: 6px 4px 2px !important;
  border-bottom: 1px solid #1e2130 !important;
  background: none;
}

.chg-pos {
  color: #50c878 !important;
}
.chg-neg {
  color: #e05050 !important;
}
.chg-flat {
  color: #c8cde0 !important;
}

/* ── Ratio tab ───────────────────────────────────── */
.ratio-presets {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.ratio-btn {
  flex: 1;
  padding: 4px 0;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.ratio-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.ratio-btn.active {
  background: #50a8e022;
  border-color: #50a8e0;
  color: #50a8e0;
}


.ratio-range-btn {
  flex: 1;
  padding: 4px 0;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.ratio-range-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.ratio-range-btn.active {
  background: #50a8e022;
  border-color: #50a8e0;
  color: #50a8e0;
}

.rdma-btn {
  padding: 3px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.rdma-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.rdma-btn.active {
  background: #3a2a6022;
  border-color: #8060c0;
  color: #a080e0;
}

#ratio-table {
  width: 100%;
  border-collapse: collapse;
}

#ratio-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b8bdd0;
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #1e2130;
}

#ratio-table td {
  padding: 6px 6px;
  border-bottom: 1px solid #181b25;
  font-size: 12px;
  color: #ccc;
}

#ratio-table td:first-child {
  color: #c0c5d8;
  font-size: 11px;
}
#ratio-table td:nth-child(2) {
  font-family: 'Consolas', monospace;
  color: #50a8e0;
  font-weight: 600;
}
#ratio-table tbody tr:hover {
  background: #1a1d27;
}

/* ── Range bar with more buttons ─────────────────── */
.range-btn {
  font-size: 10px;
}
.ratio-range-btn {
  font-size: 10px;
}

/* ── ETF tab ─────────────────────────────────────── */
.etf-metal-btn {
  flex: 1;
  padding: 4px 0;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.etf-metal-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.etf-metal-btn.active {
  background: #40d0a022;
  border-color: #40d0a0;
  color: #40d0a0;
}

.etf-range-btn {
  flex: 1;
  padding: 4px 0;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.etf-range-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.etf-range-btn.active {
  background: #40d0a022;
  border-color: #40d0a0;
  color: #40d0a0;
}

.etf-dma-btn {
  padding: 3px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.etf-dma-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.etf-dma-btn.active {
  background: #3a2a6022;
  border-color: #8060c0;
  color: #a080e0;
}

#etf-table {
  width: 100%;
  border-collapse: collapse;
}

#etf-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b8bdd0;
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #1e2130;
}

#etf-table td {
  padding: 6px 6px;
  border-bottom: 1px solid #181b25;
  font-size: 12px;
  color: #ccc;
}

#etf-table td:first-child {
  color: #c0c5d8;
  font-size: 11px;
}
#etf-table td:nth-child(2) {
  font-family: 'Consolas', monospace;
  color: #40d0a0;
  font-weight: 600;
}
#etf-table td:nth-child(3) {
  font-family: 'Consolas', monospace;
  font-size: 11px;
}
#etf-table tbody tr:hover {
  background: #1a1d27;
}

/* ── Custom ratio builder ───────────────────────────────── */
.custom-ratio-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ratio-select {
  background: #1a1d27;
  color: #e8e8e8;
  border: 1px solid #2e3145;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}
.ratio-sep {
  color: #c9a84c;
  font-weight: 700;
  font-size: 14px;
}

/* ── Overlay / Compare ──────────────────────────────────── */
.overlay-metals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0;
}
.overlay-metals label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  cursor: pointer;
  background: #1a1d27;
  border: 1px solid #2e3145;
  border-radius: 3px;
  padding: 2px 6px;
}
.overlay-metals label:hover {
  border-color: #c9a84c;
}
.overlay-metals input[type='checkbox'] {
  width: 12px;
  height: 12px;
}
#overlay-picker {
  padding: 4px 0;
}

/* ── Alerts ─────────────────────────────────────────────── */
.alert-add-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.alert-threshold-input {
  width: 70px;
}
.alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  background: #1a1d27;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 12px;
}
.alert-row .alert-label {
  flex: 1;
}
.alert-row .alert-del {
  background: none;
  border: none;
  color: #e05050;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.alert-triggered {
  border-left: 3px solid #c9a84c !important;
}

/* ── Correlation heatmap ────────────────────────────────── */
.corr-wrap {
  overflow-x: auto;
  margin-top: 8px;
}
.corr-table {
  border-collapse: collapse;
  font-size: 10px;
  white-space: nowrap;
}
.corr-table th {
  padding: 4px 6px;
  color: #c8cde0;
  font-weight: 600;
  text-align: center;
  position: sticky;
  top: 0;
  background: #0f1117;
}
.corr-table td {
  padding: 3px 5px;
  text-align: center;
  font-family: 'Consolas', monospace;
  font-size: 10px;
  border: 1px solid #1e2130;
}
.corr-range {
  color: #b8bdd0;
  font-size: 11px;
  margin-top: 6px;
}

/* ── Correlation heatmap (redesign) ─────────────────────── */
.corr-wrap {
  overflow-x: auto;
  margin-top: 6px;
}
.corr-table {
  border-collapse: collapse;
  table-layout: fixed;
}

.corr-corner {
  width: 28px;
  min-width: 28px;
}

.corr-ch {
  width: 22px;
  min-width: 22px;
  height: 52px;
  vertical-align: bottom;
  padding: 0;
  text-align: center;
}
.corr-ch div {
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.corr-ch span {
  display: block;
  font-size: 9px;
  color: #c0c5d8;
  font-weight: 600;
  white-space: nowrap;
  transform: rotate(-50deg) translateX(4px);
  transform-origin: bottom center;
  letter-spacing: 0;
}

.corr-rh {
  font-size: 9px;
  color: #c9a84c;
  font-weight: 700;
  text-align: right;
  padding: 0 4px 0 0;
  white-space: nowrap;
  vertical-align: middle;
}

.corr-table td {
  width: 22px;
  min-width: 22px;
  height: 19px;
  text-align: center;
  font-size: 8.5px;
  font-family: 'Consolas', monospace;
  border: 1px solid #0d0f18;
  cursor: default;
  vertical-align: middle;
  padding: 0;
}

.corr-legend {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 10px;
  color: #b0b6c8;
}
.cl-neg {
  color: #c04040;
}
.cl-neu {
  color: #444a66;
}
.cl-pos {
  color: #3a9660;
}

/* ── Corr range buttons (match range-btn dark style) ── */
.corr-range-btn {
  flex: 1;
  padding: 4px 0;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e8e8e8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.corr-range-btn:hover {
  color: #fff;
  border-color: #b8bdd0;
}
.corr-range-btn.active {
  background: #c9a84c22;
  border-color: #c9a84c;
  color: #c9a84c;
}