/* /backtests/open-interest: additions on top of qqq-call-put.css and call-put-overnight.css (qcp-* / cpo-* layout);
   colours from the site's Metronic tokens, so both themes follow. */
.oi-page .ls-controls select[name="source"] { min-width: 250px; }
.oi-page .ls-controls select[name="form"], .oi-page .ls-controls select[name="thr"] { min-width: 230px; }
.oi-page .ls-controls select[name="dte"], .oi-page .ls-controls select[name="money"] { min-width: 200px; }
.oi-page .ls-controls [data-oi-best] { align-self: flex-end; }
@media (max-width: 720px) {
  .oi-page .ls-controls select { min-width: 0 !important; width: 100%; }
  .oi-page .ls-controls [data-oi-best] { width: 100%; }
}
.oi-page .oi-years { min-width: 720px; }
.oi-page .oi-years td, .oi-page .oi-variants td, .oi-page .oi-snap-table td { white-space: nowrap; }
.oi-page .oi-variants { min-width: 820px; }
.oi-page .oi-variants tbody th { width: 34%; }
.oi-page .oi-variants tbody th small { display: inline; margin-left: 8px; }
.oi-page tr.oi-total > * { font-weight: 600; background: var(--tw-gray-100); }
.oi-page .oi-snap-table { min-width: 460px; max-width: 760px; margin-top: 4px; }
.oi-page .oi-hold { fill: none; stroke: var(--tw-gray-500); stroke-width: 1.5; stroke-dasharray: 4 3; }
.oi-page .oi-hold-label { font: 600 12px Inter, sans-serif; fill: var(--tw-gray-600); }
.oi-page .qcp-tip-key.oi-key-hold { background: var(--tw-gray-500); }
.oi-page .oi-days th:nth-child(1) { width: 15%; }
.oi-page .oi-strikes-chart { margin-top: 14px; }
.oi-page [data-oi-only][hidden] { display: none !important; }
.oi-page .oi-legend-follow { fill: var(--qcp-accent); }
.oi-page .oi-legend-hold { fill: var(--tw-gray-600); }