body {
	font-family: "europa", sans-serif, "Noto-Emoji";
	font-size: 20px;
	line-height: 1.2;
	padding: 0;
	margin: 0;
}

h1,h2,h3,h4,h5,h6,p {
/*	line-height: 1.45;*/
	font-family: inherit;
	font-size: inherit;
}

a {
	color: #0095ff;
	text-decoration: none;
}

a img {
	border: 0;
}

#top-div {
	position: fixed;
	top: 0;
	left:0;
	right:0;
	margin:0;
	padding:0;
	background: none;
	z-index:2;
}

table#logobar>thead>tr:hover a {
	color: #fff;
}

h1, .top-destination {
	text-transform: uppercase;
}

table#logobar {
	border: 0;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	width: 100%;
}

table#logobar thead tr {
	font-size: 50%;
/*	line-height: 1.5em;*/
	vertical-align: middle;
}

table#logobar svg {
/*	display: inline-block;*/
	max-width: 5em;
	height: 0.8em;
	fill: currentColor;
	vertical-align: middle;
}

table#logobar thead tr td {
	padding: 0.2em;
/*	white-space: nowrap;*/
}

#stop-name {
	font-size: 120%;
	font-weight: bold;
	text-transform: uppercase;
/*	line-height: 1em;*/
}

.platform-name {
	font-size: 75%;
	font-weight: normal;
}

#info {
	display: none;
	z-index: 3;
/*	position: absolute;
	width: 100%;*/
	position: fixed;
	top: 0;
	left:0;
	right:0;

	padding: 0;
	height: auto;
	overflow: hidden;
	white-space: nowrap;
	font-size: 50%;
/*	line-height: 1.2em;*/
	text-align: left;
	box-shadow: 0 0 0.5em black;
}

#info > div.l {
	padding: 0.2em;
	width: auto;
	float: left;
	text-align: left;
}

#info > div.r {
	padding: 0.2em;
	width: auto;
	float: right;
	text-align: right;
}

#info > div img {
	height: 2em;
}

#seconds {
	font-size: 66%;
}

table#display-body {
	border: 0;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	padding-left: 1em;
}

table#display-body thead {
	height: 1.5em;
}

table#display-body thead tr {
	margin: 0;
	padding: 0;
}

table#display-body thead th {
	font-size: 0.5em;
	line-height: 1;
	margin: 0;

	padding: 0.2em 0.2em;
	vertical-align: middle;
}

table#display-body thead tr th#clock {
	font-size: 1em;
	vertical-align: middle;
	white-space: nowrap;
	padding-right: 0.5em;
	padding-top: 0;
	padding-bottom: 0;
}

table#display-body thead tr th#clock div {
	line-height: 1.2;
	vertical-align: middle;
	text-align: center;
	padding-top: 0;
	padding-bottom: 0;
}

table#display-body tbody {
	overflow: hidden;
}

table#display-body tbody tr {
	display: none;
	margin: 0;
	padding-top: 0;
	border: 0;
	border-top: 0.1em #000 solid;
	height: 2em !important;
}

table#display-body tbody td {
	padding: 0.1em;
	margin: 0;

	padding-top: 0 ;
	padding-bottom: 0;
	padding-left: 0.25em;
	padding-right: 0.25em;
}

table#display-body tfoot td {
	font-size: 50%;
	padding-top: 0.2em;
	margin: 0;
/*	line-height: 1em;*/
	text-align: center;
}

th.colL {
	text-align: center;
	vertical-align: middle;
	padding-left: 0.25em !important;
	padding-right: 0.25em !important;
}

th.colD {
	width: 100%;
	text-align: left;
	vertical-align: middle;
}

th.colC {
	text-align: right;
	vertical-align: middle;
}

td.colL {
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	padding-left: 0.25em !important;
	padding-right: 0.25em !important;
}

td.colD {
	max-width: 100px;
	width: 100%;
	vertical-align: middle;
}

td.colC {
	text-align: right;
	vertical-align: middle;
}

th.colX,
td.colX {
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}

td.tooltip {
	cursor: help;
}

.platform {
	font-size: 67%;
	font-weight: bold; 
}

.blink1 {
	animation: blink1 2s cubic-bezier(1.0,0,0,1.0) infinite;
	-webkit-animation: blink1 2s cubic-bezier(1.0,0,0,1.0) infinite;
	-moz-animation: blink1 2s cubic-bezier(1.0,0,0,1.0) infinite;
}
@keyframes blink1 {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-webkit-keyframes blink1 {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-moz-keyframes blink1 {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

 .blink2 {
	animation: blink2 2s cubic-bezier(1.0,0,0,1.0) infinite;
	-webkit-animation: blink2 2s cubic-bezier(1.0,0,0,1.0) infinite;
	-moz-animation: blink2 2s cubic-bezier(1.0,0,0,1.0) infinite;
}

@keyframes blink2 {
  0% { opacity: 0.0; }
  50% { opacity: 1.0; }
  100% { opacity: 0.0; }
}
@-webkit-keyframes blink2 {
  0% { opacity: 0.0; }
  50% { opacity: 1.0; }
  100% { opacity: 0.0; }
}
@-moz-keyframes blink2 {
  0% { opacity: 0.0; }
  50% { opacity: 1.0; }
  100% { opacity: 0.0; }
}

.spinner {
  margin: 0;
  width: 2em;
  text-align: center;
  display: inline-block;
}

.spinner > div {
  width: 0.5em;
  height: 0.5em;
  background-color: #fff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


.infoTextFullscreen {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	
	display: flex;
	justify-content: center;
	align-items: center; 
	
	min-height: 1.5em;
}

.infoTextCorner {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 10;
	
	min-width: 1.5em;
	min-height: 1.5em;

	padding: 0.25em;
	cursor: pointer;
}

#infoModalText ul {
	list-style: none;
	margin-left: 1em;
	margin-right: 0.5em;
}

#infoModalText ul li {
	padding-bottom: 1em;
}

#infoModalText ul li:before {
	font-style: normal;
	content: '⚠️';
	margin-left: -1.5em;
	margin-right: 0.25em;
}

#infoModalText {
	font-style: italic;
}

.infoTextMessageTitle {
	font-style: normal;
}

.infoTextFullscreen .infoTextMessage {
	padding-right: 10em;
}

#infoText1, #infoText2 {
	position: absolute;
	left: 0.25em;
	right: 0.25em;
	margin-top: auto;
	margin-bottom: auto;
	overflow: hidden;
	max-height: 100%;
	font-style: italic;
}
