.app-status {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  padding: 24px;

  color: #afafaf;
  font-size: 16px;
  text-align: right;
  text-decoration: none;
}

.debug {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  overflow: auto;
  background: #990000;
  color: white;
  z-index: 1;
}

.int-str-pair {
  display: flex;
  flex-direction: row;
}
.int-str-pair > * {
  margin-right: 8px;
}

.settings-btn {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  padding: 24px;

  color: #afafaf;
  font-size: 36px;
  text-decoration: none;
}

.late, 
.late .hl {
  color: red;
}

.rush,
.rush .hl {
  color: orange;
}

.line-title {
  display: flex;
  flex-direction: row;
  margin-top: 32px;
}
.line-title:first-of-type {
  margin-top: 0;
}

.line-title > .line {
  padding: 0 4px;
}

.line-title > .line:first-child {
  width: 70px;
  text-align: right;
}

.line-stop {
  display: flex;
  flex-direction: row;
}

.dir {
  position: relative;
  width: 220px;
  padding-top: 8px;
  padding-right: 80px;
  text-align: right;
}

.when {
  width: 175px;
  padding-top: 8px;
  justify-content: flex-end;
}

/***
 * @media query snippets: 
 * https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 */
/* iPad 2 Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .dir {
      width: 200px;
      padding-right: 50px;
    }
}


@media 
  /* iPhone X Portrait */
  only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 2),
  /* iPhone SE Portrait */
  only screen 
  and (min-device-width: 750px) 
  and (max-device-width: 1334px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    main {
      font-size: 24px;
    }
    .dir {
      width: 96px;
    }
    .when {
      width: 82px;
    }
}

.dir:before {
  content: '';

  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;

  height: 100%;
  width: 7px;

  border-right: 4px solid red;
}

.dir:after {
  content: '';
  border-radius: 50%;
  
  display: block;
  position: absolute;
  right: -6px;
  top: 35%;
  z-index: 2;

  height: 12px;
  width: 12px;

  background: black;
  border: 3px solid red; 
}