/* Hotfix 26: grosse, vorbildnahe Garmin-GTX-330-Detailansicht. */
#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] {
  position: relative !important;
  width: min(940px, calc(100vw - 72px)) !important;
  padding: 22px 24px 20px !important;
  border: 7px solid #070808 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #303232 0, #101111 13%, #090a0a 86%, #292b2b 100%) !important;
  box-shadow: inset 0 0 0 2px #555958, inset 0 0 22px #000, 0 18px 38px rgba(0, 0, 0, .7) !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"]::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 3px;
  pointer-events: none;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .avionics-brand {
  position: relative;
  z-index: 1;
  margin: 0 6px 10px;
  color: #dddcd4;
  font: 600 .8rem/1 Arial, sans-serif !important;
  letter-spacing: .11em;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .avionics-brand b {
  font-size: 1.05rem !important;
  letter-spacing: -.04em;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-display {
  position: relative;
  z-index: 1;
  margin: 0 6px 12px !important;
  padding: 7px !important;
  border: 2px solid #020202 !important;
  background: #030302 !important;
  box-shadow: inset 0 0 24px #000, 0 0 0 1px #4b402a !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-screen {
  height: 112px !important;
  padding: 12px 18px !important;
  border: 1px solid #37260d !important;
  background: radial-gradient(ellipse at 45% 50%, #201506 0, #090601 68%, #020201 100%) !important;
  box-shadow: inset 0 0 22px #000 !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-screen input {
  width: 100% !important;
  color: #ffb13b !important;
  background: transparent !important;
  font: 700 clamp(3.4rem, 7vw, 5.5rem)/1 "Courier New", monospace !important;
  letter-spacing: .22em !important;
  text-shadow: 0 0 12px rgba(255, 137, 26, .9) !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-screen strong {
  align-self: start;
  color: #ffb13b;
  font: 700 1.7rem/1 "Courier New", monospace !important;
  text-shadow: 0 0 9px rgba(255, 137, 26, .8);
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-screen small {
  align-self: end;
  color: #c1842d;
  font: 700 1rem/1 "Courier New", monospace !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-flight-level {
  top: 10px !important;
  right: 88px !important;
  color: #9c6a25 !important;
  font: 600 .8rem/1 "Courier New", monospace !important;
  transform: none !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px 9px !important;
  margin: 0 6px !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard button,
#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard .xpdr-function {
  display: block !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 5px !important;
  border: 1px solid #070808 !important;
  border-radius: 3px !important;
  color: #e5e3dc !important;
  background: linear-gradient(180deg, #4a4c4b 0, #252626 48%, #111212 100%) !important;
  box-shadow: inset 0 0 0 1px #626564, 0 3px 4px #000 !important;
  font: 700 clamp(.72rem, 1.35vw, 1rem)/1 Arial, sans-serif !important;
  text-shadow: 0 1px 2px #000;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard button:hover:not(:disabled) {
  color: #fff4d6 !important;
  background: linear-gradient(180deg, #5b5e5c, #303231 50%, #171818) !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard button:active,
#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard button.active {
  transform: translateY(2px);
  color: #ffc05a !important;
  background: linear-gradient(#5c401b, #20170b) !important;
  box-shadow: inset 0 0 0 1px #9c7032 !important;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard button:disabled {
  color: #777 !important;
  opacity: .55;
}

#instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .instrument-footer {
  margin: 13px 7px 0 !important;
  color: #9d9d96;
  font-size: .78rem !important;
}

@media (max-width: 700px) {
  #instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] {
    width: calc(100vw - 28px) !important;
    padding: 15px 12px 13px !important;
  }

  #instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-screen {
    height: 82px !important;
    padding: 8px 10px !important;
  }

  #instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-screen input {
    font-size: clamp(2.2rem, 12vw, 3.5rem) !important;
  }

  #instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard {
    gap: 5px !important;
  }

  #instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard button,
  #instrumentDetailStage .instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard .xpdr-function {
    height: 38px !important;
    font-size: .63rem !important;
  }
}