body.pf-range-body {
  margin: 0;
  background: var(--pf-bg-page);
  color: var(--pf-text);
}

body.pf-suite-on.pf-range-body #pf-suite-nav {
  padding-right: 0;
}

@media (min-width: 993px) {
  body.pf-suite-on.pf-range-body #pf-suite-nav {
    padding-right: 220px;
  }
}

body.pf-suite-on.pf-range-body .pf-range-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1021;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  background: transparent;
  pointer-events: none;
}

body.pf-suite-on.pf-range-body .pf-range-nav a,
body.pf-suite-on.pf-range-body .pf-range-pilot {
  pointer-events: auto;
  color: var(--pf-text);
  text-decoration: none;
}

body.pf-suite-on.pf-range-body .pf-range-login {
  color: var(--pf-link);
}

.pf-range-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100vh - 34px);
}

.pf-range-side,
.pf-range-main {
  min-height: 0;
  overflow: auto;
}

.pf-range-side {
  padding: 12px;
  background: var(--pf-bg-raised);
  border-right: 1px solid var(--pf-border);
}

.pf-range-main {
  padding: 12px 16px 24px;
  background: var(--pf-bg-canvas);
}

.pf-range-head h1 {
  margin: 0;
  color: var(--pf-text-strong);
  font-family: var(--pf-font-bold);
  font-size: var(--pf-size-name);
  font-weight: 400;
}

.pf-range-lede,
.pf-range-hint,
#pf-range-meta {
  margin: 4px 0 0;
  color: var(--pf-text-muted);
  font-size: var(--pf-size-body);
}

#pf-range-summary {
  margin: 12px 0 0;
  color: var(--pf-text-strong);
  font-family: var(--pf-font-bold);
  font-size: var(--pf-size-title);
  font-weight: 400;
}

.pf-range-field {
  position: relative;
  margin: 0 0 10px;
}

.pf-range-field > label,
.pf-range-checks legend {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  color: var(--pf-text-muted);
  font-size: var(--pf-size-caption);
  font-family: var(--pf-font-bold);
  font-weight: 400;
}

.pf-range-checks {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.pf-range-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  color: var(--pf-text);
  font-weight: 400;
}

.pf-range-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
}

.pf-range-quick button,
#pf-range-suggest button,
.pf-ansi-suggest button {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--pf-bg-control);
  color: var(--pf-text);
  font: 400 var(--pf-size-caption)/1.4 var(--pf-font);
}

.pf-range-quick button {
  padding: 3px 8px;
}

.pf-range-quick button:hover,
.pf-range-quick button:focus,
#pf-range-suggest button:hover,
#pf-range-suggest button:focus,
.pf-ansi-suggest button:hover,
.pf-ansi-suggest button:focus {
  border-color: var(--pf-focus);
  outline: 1px solid var(--pf-focus);
  outline-offset: 1px;
}

.pf-range-ly {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-range-ly input[type="range"] {
  flex: 1 1 auto;
  accent-color: var(--pf-focus);
}

#pf-range-ly {
  width: 5.5em;
}

#pf-range-reset {
  margin-top: 6px;
}

#pf-range-scan {
  margin-top: 4px;
}

#pf-range-suggest,
.pf-ansi-suggest {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 240px;
  overflow: auto;
  background: var(--pf-bg-canvas);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
}

#pf-range-suggest button,
.pf-ansi-suggest button {
  display: block;
  width: 100%;
  padding: 4px 8px;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#pf-ansi-fleet {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

#pf-ansi-fleet li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 4px;
}

#pf-ansi-price {
  margin-top: 4px;
}

.pf-range-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
}

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

#pf-range-table th,
#pf-range-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--pf-border);
  text-align: left;
  vertical-align: middle;
}

#pf-range-table th {
  color: var(--pf-text-muted);
  font-family: var(--pf-font-bold);
  font-size: var(--pf-size-caption);
  font-weight: 400;
}

.pf-range-sec {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--pf-radius);
  color: var(--pf-text-strong);
  font-family: var(--pf-font-bold);
  font-size: var(--pf-size-caption);
  font-weight: 400;
}

.pf-range-sec-high { background: var(--pf-band-hs); }
.pf-range-sec-low { background: var(--pf-band-ls); }
.pf-range-sec-null { background: var(--pf-band-ns); }

.pf-range-none,
.pf-range-empty {
  color: var(--pf-text-muted);
}

.pf-range-status-safe { color: var(--pf-here); }
.pf-range-status-caution { color: var(--pf-action-warning); }
.pf-range-status-camp { color: var(--pf-action-danger); }

.pf-range-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  white-space: nowrap;
}

.pf-range-actions .btn {
  text-decoration: none;
}

#pf-range-radar {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin-top: 16px;
}

#pf-range-radar[hidden] {
  display: none;
}

.pf-range-ring {
  fill: none;
  stroke: var(--pf-border);
  stroke-width: 1;
}

.pf-range-ring-max {
  fill: none;
  stroke: var(--pf-focus);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.pf-range-origin {
  fill: none;
  stroke: var(--pf-text-strong);
  stroke-width: 1;
}

.pf-range-dot-high { fill: var(--pf-band-hs); }
.pf-range-dot-low { fill: var(--pf-band-ls); }
.pf-range-dot-null { fill: var(--pf-band-ns); }

@media (max-width: 991px) {
  .pf-range-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .pf-range-side,
  .pf-range-main {
    height: auto;
    overflow: visible;
  }

  #pf-range-radar {
    display: none;
  }
}