.sj_sans {
  font-family: "SJ Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

.sj_sans_bold {
  font-family: "SJ Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  font-family: "SJ Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  background-color: #404040;
  color: #252525;
  position: static;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.6;
  overflow: hidden;
}

body *, body *:after, body *:before {
  box-sizing: inherit;
}

h2+p {
  margin-top: 30px;
}

table {
  width: 100%;
  font-size: 1.875rem;
  background-color: #252525;
  color: #ffffff;
  border-spacing: 0;
  border-collapse: collapse;
  line-height: 1.4;
}

@media (orientation: landscape) {
  .portrait-mode {
    display: none;
  }

  .sidebar {
    width: 720px;
    padding: 5.625rem 7.5rem;
  }
}

@media screen and (orientation: portrait) {
  body, html {
    font-size: 8px;
  }
  .column-2,
  .column-5,
  .column-6 {
    display: none;
  }

  .time {
    white-space: normal;
  }

  .delayed .time .portrait-mode> {
    text-decoration: none;
  }

  .train-name {
    font-size: 1.6rem;
    padding-left: 0;
    line-height: 1.85;
  }


  .remarks {
    font-size: 1.6rem;
    white-space: normal;
    line-height: 1.4;
  }

  .remarks::first-line {
    line-height: 1.85;
  }

  td:last-child,
  th:last-child {
    padding-right: 0.938rem;
  }

  td:first-child,
  th:first-child {
    padding-left: 0.938rem;
  }

  caption {
    padding-left: 0.938rem;
    padding-right: 0.938rem;
  }
}


@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (min-resolution: 2dppx) {
  body,
  html {
    overflow: scroll;
    font-size: 8px;
  }
}

@media screen and (max-width:1480px) {
  h2 {
    font-size: 2rem;
  }

  body,
  html {
    font-size: 8px;
  }

  caption .logo {
    height: 2rem;
  }
}

@media screen and (min-width:2160px) {
  body,
  html {
    font-size: 32px;
  }
}

@font-face {
  font-family: 'SJ Sans';
  src: url('./fonts/sjsans_regular-webfont.eot');
  /* IE9 Compat Modes */
  src: url('./fonts/sjsans_regular-webfont.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('./fonts/sjsans_regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SJ Sans';
  src: url('./fonts/sjsans_bold-webfont.eot');
  /* IE9 Compat Modes */
  src: url('./fonts/sjsans_bold-webfont.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('./fonts/sjsans_bold-webfont.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'SJ Sans';
  src: url('./fonts/sjsans_italic-webfont.eot');
  /* IE9 Compat Modes */
  src: url('./fonts/sjsans_italic-webfont.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('./fonts/sjsans_italic-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.english {
  display: none;
}

thead tr {
  background-color: #404040;
  color: #ffffff;

}

h2 {
  line-height: 1.2;
  margin: 0;
  font-size: 1.875rem;
}

th {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  font-size: 1.6rem;
  padding: 0.75rem 1rem 0.25rem;
}

th.train-header {
  text-align: right;
}

caption {
  padding: 0.875rem 1.875rem 0;
  background-color: #404040;
  color: #ffffff;
}

.header {
  font-weight: bold;
  float: left;
}

.clock {
  font-weight: normal;
  float: right;
  width: 6rem;
  text-align: right;
}


tfoot {
    position: fixed;
    margin: 0;
    bottom: 0;
    background-color: #404040;
    width: 100%;
    text-align: right;
    font-size: 1.6rem;
    line-height: 1.1;
}

td {
    padding: 0.75rem 1rem;
    vertical-align: top;
    white-space: nowrap;
}

td:last-child,
th:last-child {
    padding-right: 1.875rem;
    width: 100%;
}

td:first-child,
th:first-child {
    padding-left: 1.875rem;
}


tr:nth-child(even) {
    background-color: #303030;
}

tr.divider-row {
    display: none;
    background-color: #404040;
    font-weight: normal;
    font-size: 1.6rem;
}

tr.divider-row *:first-letter {
    text-transform: capitalize;
}


.version {
    color: #74786d;
}

.update-time {
    font-weight: bold;
}

.logo {
    padding-right: 0.5rem;
    height: 1.5rem;
}

.train-number {
  font-weight: bold;
  text-align: right;

}

.align-left {
  text-align: left;
}

.remarks {
  text-align: left;
  justify-content: left;
}

.departed {
  color: #a8a8a5;
}

.track-changed {
  color: #efdf00;
}

.org-time {
  text-decoration: line-through;
  font-weight: normal;
}

.destination {
  display: block;
}

.time {
  font-weight: bold;
}

.new-time {
  color: #efdf00;
  font-family: "SJ Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}


.missing-time {
  letter-spacing: 1px;
  font-family: "SJ Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

.missing-time-remark {
  color: #efdf00;
  font-family: "SJ Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

.canceled-track {
  color: #de1f26;
}

.train-name {
  padding-left: 4px;
}

.canceled-remarks {
  color: #de1f26;
  font-family: "SJ Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

@media (orientation: landscape) {
  .portrait-mode {
    display: none;
  }

  .sidebar {
    width: 720px;
    padding: 5.625rem 7.5rem;
  }
}

.trainInfoItemList {
    font-size: 1.6rem;
}