.route {
  display: inline-block;
  width: 25%;

  vertical-align: top;
  box-sizing: border-box;
}

.with-map .route {
  width: 33%;
}

.route > div {
  padding: 1em;

  border-radius: 4px;
}

.route > div:hover {
  background: rgba(255, 255, 255, 0.6);

  cursor: move;
}

.hide-route {
  position: absolute;
  top: 5px;
  right: 5px;

  display: none;

  background: #cccccc;
  opacity: 0.5;

  border-radius: 4px;
}

.hide-route:hover {
  background: #cccccc;
  opacity: 1.0;
}

.route:hover .hide-route {
  display: block;
}

.route h3 {
  font-size: 2em;
  padding: 0.4em 0.35em 0.3em 0.35em;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.route .white h3 {
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.route .img28 {
  max-height: 0.7em;
  vertical-align: baseline;
}

.route .img34 {
  max-height: 0.85em;
  margin-bottom: -2px;
}

.route i {
  font-size: 0.8em;
  font-style: normal;
}

.route small {
  color: inherit;

  font-family: Helvetica, Arial, serif;
  font-weight: lighter;
  font-size: 0.4em;
  line-height: 0.4em;

  display: block;

  margin-bottom: 0.4em;
  margin-top: 0.2em;
}

.route .direction {
  border-radius: 0.2em;
  margin-bottom: 1.3em;
}

.route .time h4 {
  width: 33%;

  padding: 0.4em 0;
  text-align: center;

  display: inline-block;
  box-sizing: border-box;
}

.route .time h4:nth-child(n+4) {
  display: none;
}

.route .time h4:not(:first-of-type) {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.route .white .time h4:not(:first-of-type) {
  border-left: 1px solid rgba(0, 0, 0, .2);
}

.route .stop_name {
  position: relative;
  background-repeat: no-repeat;
  background-position: 0 0.05em;
  background-size: auto 1em;
  padding-left: 1em;

  font-size: 1.4em;
  margin-bottom: 0.4em;
  display: block;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


@-webkit-keyframes realtimeAnim {
  0%   {opacity: 0.5;}
  25%  {opacity: 0.5;}
  50%  {opacity: 0.5;}
  75%  {opacity: 0.6;}
  100% {opacity: 1.0;}
}

@keyframes realtimeAnim {
  0%   {opacity: 0.5;}
  25%  {opacity: 0.5;}
  50%  {opacity: 0.5;}
  75%  {opacity: 0.6;}
  100% {opacity: 1.0;}
}

.route h4 {
  position: relative;
}

.route .realtime {
  width: 0.28em;
  height: 0.28em;

  position: absolute;
  margin-top: -4px;
}

.route .realtime:before,
.route .realtime:after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;

  position: absolute;

  background-size: 100%;
}

.route .realtime:before {
  background-image: url('/assets/images/real_time_wave_small-w@2x.png');

  -webkit-animation: realtimeAnim 1.4s linear 0s infinite alternate;
  animation: realtimeAnim 1.4s linear 0s infinite alternate;
}

.route .white .realtime:before {
  background-image: url('/assets/images/real_time_wave_small@2x.png');
}

.route .realtime:after {
  background-image: url('/assets/images/real_time_wave_big-w@2x.png');

  -webkit-animation: realtimeAnim 1.4s linear 0.3s infinite alternate;
  animation: realtimeAnim 1.4s linear 0.3s infinite alternate;
}

.route .white .realtime:after {
  background-image: url('/assets/images/real_time_wave_big@2x.png');
}

.route .inactive {
  display: block;

  background-image: url('/assets/images/inactive-w@2x.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px auto;
}

.route .white .inactive {
  background-image: url('/assets/images/inactive@2x.png');
}

/* Column ladder. Upstream only dropped below four columns at 2000px, which no
   screen here reaches -- the Home Assistant iframe is 1854 CSS px -- so a fifth
   or sixth route wrapped to a row that starts below the fold and is never seen.
   This address genuinely has six routes inside 1300 m at peak (M20, Ride On 37,
   41, Red, Ride On 8, M12), so the steps come in earlier.

   The widths are chosen against what is already known to be legible: at 800px
   the original four columns gave about 200px each. Six columns at the 1350px
   step is 225px, and 309px in the Home Assistant panel, so nothing gets
   tighter than the layout upstream already shipped. */
@media (min-width: 1150px) {
  .route {
    width: 20%;
  }

  .with-map .route {
    width: 25%;
  }
}

@media (min-width: 1350px) {
  .route {
    width: 16.666%;
  }

  .with-map .route {
    width: 25%;
  }
}