/* DCC_LIVE_CONTROL_LAYOUT_FIX */

/* Give Band and Mode their own properly sized columns */
.radio-header {
  grid-template-columns:
    220px
    125px
    minmax(250px, 1fr)
    175px
    80px !important;
  column-gap: 10px !important;
  align-items: center !important;
}

/* Band column */
.band-control {
  width: 210px !important;
  min-width: 210px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 30 !important;
}

.dcc-live-band-select {
  width: 205px !important;
  min-width: 205px !important;
  max-width: 205px !important;
  min-height: 38px !important;
  padding: 4px 30px 4px 12px !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Mode column */
.dcc-live-mode-select {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  min-height: 38px !important;
  padding: 4px 28px 4px 10px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Keep the main frequency centered in its available space */
.radio-header .dial {
  min-width: 240px !important;
  justify-self: center !important;
}

/* Slightly tighter layout for narrower browser windows */
@media (max-width: 1350px) {
  .radio-header {
    grid-template-columns:
      195px
      115px
      minmax(220px, 1fr)
      150px
      70px !important;
    column-gap: 7px !important;
  }

  .band-control {
    width: 190px !important;
    min-width: 190px !important;
  }

  .dcc-live-band-select {
    width: 185px !important;
    min-width: 185px !important;
    max-width: 185px !important;
    font-size: 14px !important;
  }

  .dcc-live-mode-select {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    font-size: 12px !important;
  }
}