/* Bottom strip. Fixed rather than part of the flow: the route grid is
   top-aligned with a lot of empty space underneath, and overlaying keeps the
   vendored layout's height arithmetic untouched. */
.status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: stretch;

  font-size: 1.5em;
  line-height: 1.35;

  background: #f4f4f4;
  border-top: 1px solid #e0e0e0;
  box-sizing: border-box;
}

.status-bikes {
  flex: 0 0 auto;
  max-width: 40%;

  padding: 0.55em 0.9em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  color: #333;
}

.bike-badge {
  background: #d21f3c; /* Capital Bikeshare red */
  color: #fff;
  font-weight: bold;

  padding: 0.12em 0.42em;
  margin-right: 0.5em;
  border-radius: 0.18em;

  white-space: nowrap;
}

.bike-station {
  font-weight: bold;
  margin-right: 0.5em;
  white-space: nowrap;
}

.bike-counts {
  white-space: nowrap;
  color: #555;
}

.bike-counts.closed {
  color: #a00;
  font-style: italic;
}

.status-alerts {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.alert-item {
  flex: 1 1 0;
  min-width: 0;

  padding: 0.55em 0.9em;
  border-left: 1px solid #e0e0e0;

  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-item.info {
  background: #eef4fb;
}

.alert-item.warning {
  background: #fdf3e2;
}

.alert-item.severe {
  background: #fce9e9;
}

.alert-routes {
  font-weight: bold;

  background: #333;
  color: #fff;

  padding: 0.12em 0.42em;
  margin-right: 0.5em;
  border-radius: 0.18em;

  flex: 0 0 auto;
}

.alert-item.severe .alert-routes {
  background: #b00020;
}

.alert-title {
  font-weight: bold;
  margin-right: 0.5em;
  flex: 0 0 auto;
}

.alert-description {
  color: #555;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}