.thermal-vario-panel {
  position: fixed;
  top: calc(66px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 7;
  display: grid;
  gap: 5px;
  width: 202px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(5, 14, 18, 0.66);
  color: #f7fbff;
  font: 700 11px "Trebuchet MS", "Segoe UI", sans-serif;
}

.thermal-vario-panel.hidden {
  display: none;
}

.thermal-vario-panel .thermal-vario-title {
  color: #fff1b8;
  font-size: 11px;
  text-transform: uppercase;
}

.thermal-vario-panel .vario-row,
.thermal-vario-panel label {
  display: grid;
  grid-template-columns: 44px minmax(58px, 1fr) 32px 22px;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.thermal-vario-panel .vario-row {
  grid-template-columns: auto 1fr auto;
}

.thermal-vario-panel span,
.thermal-vario-panel small,
.thermal-vario-panel output {
  color: rgba(247, 251, 255, 0.72);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.thermal-vario-panel strong,
.thermal-vario-panel output {
  color: #ffd164;
  text-align: right;
}

.thermal-vario-panel input[type="range"] {
  width: 100%;
  min-width: 0;
}

@media (max-width: 720px), (max-height: 520px) {
  .thermal-vario-panel {
    top: calc(58px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    width: min(184px, calc(100vw - 16px));
    padding: 6px;
  }
}