/* Visual proportions inspired by the supplied compact DJ layout. No behavior changes. */
body {
  background: #050609 !important;
}

.hardware-layout {
  grid-template-columns: minmax(0, 1fr) 245px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #17192c !important;
}

.hardware-layout .deck,
.hardware-layout .pro-center-mixer {
  border-color: #292c45 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #202239 0%, #17192c 55%, #11131f 100%) !important;
  box-shadow: inset 0 1px #45496355, inset 0 -1px #000 !important;
}

.hardware-layout .deck-head {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #353951 !important;
  border-radius: 0 !important;
  background: #17192c !important;
}

.deck-a .deck-label,
.deck-a .deck-head strong {
  color: #ff8b00 !important;
}

.deck-b .deck-label,
.deck-b .deck-head strong {
  color: #ff315f !important;
}

.hardware-layout .deck-body {
  min-height: 198px !important;
  background: #191b30;
}

.hardware-layout .platter {
  width: 184px !important;
  height: 184px !important;
  border-width: 3px !important;
  background-color: #08090d !important;
  box-shadow: 0 7px 16px #000, inset 0 0 0 3px #25293a !important;
}

.deck-lcd {
  margin: 0 8px;
  border-color: #3b3f57 !important;
  border-radius: 0 !important;
  background: #111321 !important;
}

.source-tabs {
  background: #11131f;
}

.source.active {
  color: #fff !important;
  background: #363a4d !important;
}

.eq-strip {
  padding: 5px;
  border-left: 1px solid #303349;
  border-right: 1px solid #0b0c13;
}

.pad-mode-buttons {
  width: calc(100% - 24px) !important;
}

.transport {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #34384e !important;
  border-radius: 0 !important;
  background: #11131f !important;
}

.transport .play {
  width: 84px !important;
  min-width: 70px !important;
  height: 50px !important;
  border-radius: 3px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #686b76, #373a45) !important;
  box-shadow: inset 0 1px #ffffff55, 0 2px 4px #000 !important;
}

.transport .cue {
  width: 62px !important;
  min-width: 52px !important;
  height: 50px !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px #ffffff33, 0 2px 4px #000 !important;
}

.hardware-layout .pro-center-mixer {
  padding: 7px !important;
}

.pro-center-mixer .mixer-title {
  border: 0 !important;
  border-bottom: 1px solid #383b51 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.mixer-channel,
.pro-meter-screen,
.pro-center-mixer .channel-faders,
.pro-center-mixer .head-controls,
.pro-center-mixer .cross-label {
  border-color: #363a50 !important;
  background-color: #11131f !important;
}

.browser {
  margin-top: 0 !important;
  border: 0 !important;
  border-top: 2px solid #262a39 !important;
  border-radius: 0 !important;
  background: #020304 !important;
}

.browser > aside,
.browser .library,
.browser .library-head {
  background: #050607 !important;
}

.browser tbody tr:hover {
  background: #17191e !important;
}

@media (max-width: 1400px) {
  .hardware-layout {
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr) !important;
  }

  .hardware-layout .platter {
    width: 160px !important;
    height: 160px !important;
  }
}