.content {
  --bulma-content-block-margin-bottom: .5em;
}

/* Navbar */
@media screen and (min-width: 1024px) {
  .navbar-start {
    gap: .75rem;
    margin-left: .75rem;
  }
}

/* By default the dropdown is shifted up which looks a bit odd with is-active */
.navbar {
  --bulma-navbar-dropdown-offset: -0.01em;
}

/* Change the color of the arrow when the navbar-link is active to the same as the text color */
.navbar-link.is-active:not(.is-arrowless)::after {
  --bulma-navbar-dropdown-arrow: var(--bulma-navbar-item-color);
}

/* .navbar .navbar-burger {
  color: #fff;
} */

.navbar-brand .icon {
  font-size: 1.4rem;
}

/* https://bulma.io/documentation/layout/hero/#fullheight-with-navbar */
.is-fullheight-with-navbar {
  /*
    For some reason the class in the docs does not exist
    and due to padding an additional space needs to be removed from the height
  */
  min-height: calc(100vh - var(--bulma-navbar-height) - 4.5rem);
}

.section {
  --bulma-section-padding: 1rem 1rem;
  --bulma-section-padding-desktop: 3rem 1.5rem;
}

/* Footer */
.footer {
  --bulma-footer-padding: 1.5rem 1.5rem;
}

.footer a:hover {
  text-decoration: underline;
}

/* Modal */
.modal {
  --bulma-modal-card-body-padding: 1rem;
  --bulma-modal-card-head-padding: 1rem;
}

/* Customizations */

/* Slightly decrease font size for password validation rules (help text of password field) */
#div_id_password1 > ul > li {
  font-size: 0.9em;
}

.table.standings {
  width: 80%;
}

.table.predictions td {
  vertical-align: middle;
}

/* Make the team name column wider */
.table.standings th:nth-of-type(2) {
  width: 50%;
}

.table td.match-info {
  display: none;
}

/* Country flags next to team names */
.flag {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 0.4em;
}

.flag.is-right {
  margin-right: 0;
  margin-left: 0.4em;
}

/* Consistent width for select form controls */
form.bonus select {
  width: 19rem;
}

/* Small screens, breakpoint is the same as Bulma's mobile breakpoint */
@media screen and (max-width: 768px) {

  /* Use Bulma's is-narrow rule for mobile tables */
  .table.is-narrow-mobile td,
  .table.is-narrow-mobile th {
    padding: 0.25em 0.25em;
  }

  /* Decrease column widths to save space */
  .table.predictions td:first-child, .table.schedule td:first-child {
    width: 14%;
  }

  .table.predictions td:nth-of-type(4), .table.predictions td:last-child {
    width: 15%;
  }

  .table td.match-info {
    display: table-cell;
  }

  .table td.stadium {
    display: none;
  }

  .table.standings {
    width: 100%;
  }

  /* Hide full country name */
  table td[data-countrycode]:not([data-countrycode=""]) span {
    display: none;
  }

  /* Replace country name with 3 letter code for narrow screens. */
  table td[data-countrycode]:not([data-countrycode=""])::after {
    content: attr(data-countrycode);
  }

  /* Hide group name */
  table td[data-group-shortcut]:not([data-group-shortcut=""]) span {
    display: none;
  }

  /* Replace group name with shortcut for narrow screens. */
  table td[data-group-shortcut]:not([data-group-shortcut=""])::before {
    content: attr(data-group-shortcut);
  }

}