/* The classic shell's header on phones (ndesign_top.asp): the club's name with the four buttons on one line, the next match
   with the date and time on the line below. The pieces keep their markup; the boxes around them stop being boxes. */

/* the season's word in the date line: its two letters on wide screens, whole on phones (two lines there) */
.hdr-season-l { display: none; }

@media (max-width: 767.98px) {
  .hdr-season-s { display: none; }
  .hdr-season-l { display: inline; }
  .header-bg2 { padding: 5px 0 2px !important; border-left: 0; border-right: 0; }
  .header-container {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "club ctl" "next date";
    align-items: center; justify-content: stretch; column-gap: 8px; row-gap: 3px; padding: 0 6px 7px;
  }
  .hleft-box, .hright-box, .hleft-box .d-flex, .hleft-box .next-m-box { display: contents; }

  /* the club's name */
  .hleft-box .club { grid-area: club; min-width: 0; margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* coins, messages, club news, shortlist */
  #controlBox { grid-area: ctl; display: flex; align-items: center; gap: 9px; padding-right: 4px; }
  #controlBox > a { display: block; }
  #controlBox .btn-top, #controlBox .btn-top1 { height: 32px; margin: 0; padding: 2px 6px; }
  #controlBox .btn-top { overflow: visible; }
  #controlBox .btn-top img { width: 22px; height: 22px; }
  #controlBox .btn-top1 img { width: 22px !important; height: 22px !important; }
  #controlBox .btn-top1 strong { width: auto; max-width: 48px; top: 0; margin-left: 2px; font-size: 10px; line-height: 1.1; }
  /* the counters at the button's top right corner, above the next button, never clipped */
  #controlBox .btn-top .badge, #controlBox .btn-top .badgeZero { top: -6px; left: auto; right: -8px; z-index: 2; padding: 2px 5px; font-size: 10px; }
  #controlBox .country-select { display: none; }

  /* the next match: a VS mark, the opponent, the date and hour, in a small dark box */
  .hleft-box .next-m {
    grid-area: next; justify-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: center;
    max-width: 100%; height: auto; min-width: 0; margin: 0; padding: 2px 9px; border: 1px solid #5aa608; border-radius: 6px; background: rgba(5, 40, 15, 0.45);
  }
  .hleft-box .next-m h4 { grid-row: 1 / 3; margin: 0; padding: 0; font-size: 0; background: none; }
  .hleft-box .next-m h4::before { content: "VS"; display: block; font: italic bold 15px Georgia, "Times New Roman", serif; color: #f4c040; letter-spacing: 0.5px; }
  .hleft-box .next-m h5 { margin: 0 !important; padding: 0; font-size: 12px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hleft-box .next-m h6 { margin: 0; padding: 0; font-size: 11px; line-height: 1.2; white-space: nowrap; }

  /* the date and time, in two short lines */
  #dateTime { grid-area: date; justify-self: end; max-width: 200px; }
  #dateTime table { width: auto; table-layout: auto; }
  #dateTime td { width: auto; padding: 0; }
  #dateTime td:first-child { display: none; }
  #dateTime td[nowrap] { white-space: normal; text-align: right; font-size: 11.5px !important; line-height: 1.25; }

  /* the menu's three bars and the side menu's arrows, white */
  .nav-box-m .main-menu-btn-icon, .nav-box-m .main-menu-btn-icon:before, .nav-box-m .main-menu-btn-icon:after { background: #fff; }
  .nav-box-m .navbar-toggler { color: #fff; }
  .nav-box-m .main-menu-btn { margin-left: 2px; }   /* the three bars as close to the edge as the side menu's arrows */
}