@font-face {
    font-family: "Dot-Matrix";
    src: url(dotmatrix.ttf);
}

html{
    overflow-x:hidden;
    height: 100%;
  }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height:100%;
    margin:0;

}

#displayBoardWrapper {
    display: block;
    width:75%;
    min-width: 1275px; /* Set at this as "Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch" is the longest station name. */
    background-color: silver;
    margin: auto;
    padding:10px;
    border-radius: 25px;
    border: 1px solid silver;
    height:310px;
}

.topOfScreenText {
    text-align: center;
    margin-top:5px;
    color: rgba(255,255,255,0.4);
    text-shadow: 0 -2px  rgba(0, 0, 0, 0.792);
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

div.topOfScreenText > * {
    color: rgba(255,255,255,0.4);
    text-shadow: 0 -2px  rgba(0,0,0,0.6);
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#displayBoardInnerWrapper {
    background-color: black;
    margin-top:7px;
    margin-bottom:5px;
    width:100%;
    height:210px;
    border-radius: 25px;
}


#clock {
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding-top:15px;
    padding-bottom:5px;
    width:400px;
    height:40px;
    text-align: center;
    font-size:25px;
    color: orange;
    vertical-align: middle;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 2px solid silver;
    border-width: 0px;
}

#displayBoardWrapper {
    font-family:'Dot-Matrix' !important;
}

.board-top {
    height: 70px;
    width:98%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    color:#f2ad19;
    text-align: center;
}

.board-top div {
    width: 98%;
    margin: 0;
}

.board-top table {
    width: 100%;
    height: 100%;
}

.board-top td {
    font-size:30px;
}

#nextTrainTime {
    width:120px;
    margin: 0;
    text-align: left;
    color:#f01c5c;
}

#nextTrainPlatform {
    width:80px;
    text-align: left;
    color:lightgray;
}

#nextTrainDest{
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    color:#f2ad19;
    width:auto;
}

#nextTrainExpected{
    white-space: nowrap;
    overflow: hidden;
    width:285px;
    text-align: right;
    color:green;
}

.blink_me {
    animation: blinker 1s linear infinite;
  }
  
@keyframes blinker {
    50% {
        opacity: 0;
    }
}


.board-middle {
    height: 70px;
    width:98%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    color: orange;
}

.board-middle div {
    width: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
}

.board-middle table {
    width: 100%;
    height: 100%;
}

#board-middle-table-row {
    height:100%;
}

.board-middle td {
    display: table-cell;
    vertical-align: middle;
}

#callingAtLabel{
    font-size:35px;
    text-align: left;
    color:#ff0000;
    padding-left:5px;
    padding-right:25px;
    height:100%;
}

#callingAtText{
    color:#ffc000;
    width:100%;
}

/* Container styles */
.scrolling-text-container {
    overflow: hidden;
    color:#ffc000;
    margin-right:20%;
    width:100%;
}

/* Inner container styles */
.scrolling-text-inner {
    white-space: nowrap;
    font-size:30px;
    width:100%;
}

#scroll {
    --marquee-speed: 45s;
    --direction:scroll-left;
}
/* Text styles */
.scrolling-text {
    display:flex;
}

.scrolling-text-item {
    padding-left: 0;
    padding-right:50px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.board-bottom {
    height: 70px;
    width:98%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    color: orange;
}

.board-bottom div {    
    width:100%;
    height: 100%;
}

.board-bottom table {
    table-layout: fixed;
    width: 100%;
    height: 100%;
    margin-left:auto;
    margin-right: auto;
}

.board-bottom td {
    font-size:35px;
    width:100%;
}

#boardBottomText{
    color:lightblue;
}

.nextTrainsTable {
    width:100%;
    white-space: nowrap;
}

.nextTrainsTable td{
    font-size:30px;
}

.nextTrainsTableStaticText {
    width:100%;
    text-align: center;
}

#nextTrainsTableDueOnTime {
    text-align: right;
    color:green;
}

#nextTrainsTableDueLate {
    text-align: right;
    color:red;
}

#noNextTrainTitle{
    margin-left:auto;
    margin-right:auto;
    color:#f2ad19;
}



#footer {
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 8px;
    display:block; 

  }

  #footer  * {
    color: rgba(255,255,255,0.4);
    text-shadow: 0 -2px  rgba(0,0,0,0.6);
    font-size: 18px;
}