body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather Sans', sans-serif;
}

h4.map-label {
  padding: 5px 8px;
  font-size: 10px;
}

.list-wrap {
  padding: 4px 0.5rem;
}



.grid-container {
  display: grid;
  /* FOR h1088 x w1920 SCREEN */
  grid-template-columns: var(--gcol-a) var(--gcol-b) var(--gcol-c);
  grid-gap: 0px;  
}


#map {
  height: 0vh;
  width: 0vw;
  visibility: hidden;
}

#map.active {
  margin: .1rem;
  height: 50vh;
  width: 98vw;
  visibility: visible;
}

#vessdata {
  background-color: black;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start:2;
  grid-row-end:3;
  min-height: 41.66vh; max-height: 41.66vh;
  min-width:  41.64vw; max-width:  41.64vw;
  text-align: center;
}

#vessevnt {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start:3;
  grid-row-end:4;
  min-height: 41.66vh; max-height: 41.66vh;
  min-width:  41.64vw; max-width:  41.64vw;
  text-align: center;
}
#waypoint {
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start:3;
  grid-row-end:4;
  min-height: 41.66vh; max-height: 41.66vh;
  min-width:  41.64vw; max-width:  41.64vw;
  text-align: center;
  position: relative;
}

#waypoint-inner h3 {
  font-size: 0.6rem;
}


#vess-list {
  visibility: hidden;
  background-color: rgba(228, 225, 225, 0.836);
  /* min-height: 83.33vh; max-height: 86.33vh;
    min-width:  16.72vw; max-width:  16.72vw; */
  text-align: center;
}

#vess-list.active {
  visibility: visible;
}

#titlebar {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  min-height: 8.33vh; max-height: 8.33vh;
  min-width:  100vw; max-width:  100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  
}
#newsbar {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start:4;
  grid-row-end:5;
  text-align: center;
  min-height: 8.33vh; max-height: 8.33vh;
  min-width:  100vw; max-width:  100vw;
}

/* Label that's outside the Flow  */
h2#overlay {
  position: absolute;
  top: 8.33vh;
  text-align: center;
  width: 41.02vw;
  min-width: 41.02vw; max-width: 41.02vw;
  margin: 2px 6px;
}


/* Titlebar logo  */
#logo-img {   
  position: relative;
  z-index: 95;
  width: 10.31vw;
  height: 8.75vh; 
}

.logo h1 {     
  font-size: 1.98rem;
  color: #000;
  padding: 5px;
  border-radius: 8px;
  transform: translateY(-20px);
  background-color: rgba(255, 255, 255, 0.801);
  font-family: 'Merriweather Sans', sans-serif;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.50);
  z-index: 100;
}
.logo h1 span {
  color: blue;
  -webkit-background-clip: text;  
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 5px;
}
h1 {
  font-size: 2rem;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color:black;
  
}


/* Secondary Titles */
h2 {
  /* background-color: silver; */
  border-radius: 8px;
  margin: 2px 4px;
  font-family: 'Merriweather Sans', sans-serif;
  color: black;
  text-shadow: 2px 2px 2px rgba(134, 132, 132, 0.5);
  z-index: 100;   
  background: #000; /* Safari 4-5, Chrome 1-9 */ 
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(silver)); /* Safari 5.1, Chrome 10+ */ 
  background: -webkit-linear-gradient(top, #555, silver); /* Firefox 3.6+ */ 
  background: -moz-linear-gradient(top, #555, silver); /* IE 10 */ 
  background: -ms-linear-gradient(top, #555, silver); /* Opera 11.10+ */ 
  background: -o-linear-gradient(top, #555, silver); 
  
}

/* Text in newsbar */
#newstext {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 17pt;
  color: white;
}




/* Vessel List styling */
span.waypoint {
  display:inline-block;
  letter-spacing: .4rem;
  width: 100%;
  background-color: red;
  color: rgb(245, 230, 230);
  margin: 2px; 
  padding: 2px;
}

img.dir-img {
  margin-left: auto;
  margin-right: auto;
  height: 25px;
  filter: drop-shadow(2px 2px 4px #4444dd);
}
.listMode ul {
  padding: 0px .2rem;
  max-width: 98vw;
  /*  max-height: var(--list-ht); */
  overflow: hidden;
}
.listMode ul li {
  margin: 0px;
  padding: 0px;
}
.list-wrap  {
  background-color: #2c3e50;
  opacity: 1;
  border-radius: 8px 8px 0px 0px;
  display: flex;
  font-size: 20pt;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  /* padding: 10px 0.5rem; MEDIA OVERRIDE */
  
}
.listMode h5 {
  font-size: 1rem;
  border-radius: 0px 0px 8px 8px;
  color: rgba(255, 255, 255, 0.829);
  padding: .3rem;
  margin-top: 0px;
  background: rgb(168, 179, 14);
  text-align: center;
  text-shadow: 1px 1px #000;
}
h4.map-label {
  display: inline;
  background: aquamarine;
  color: black;
  /* padding: 5px 8px; MEDIA OVER RIDE */
  border-radius: 60%;
  /* font-size: 15px; MEDIA OVER RIDE*/
  border: 2px solid black;  
}
.listMode .list-wrap h4.map-label {
  margin: 5px;
}
.list-wrap .tile-title {
  font-size: var(--h4vsli);
  color: white;
  margin: auto;
  margin-bottom: 2px;
  margin-left:auto;
  margin-right: auto;
}

.list-wrap div.dir-container {
  position: relative;
  text-align: center;
}

.list-wrap span.speed {
  color: white;
  font-size: small;
  display: inline-block; 
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a.btn {
  background-color: #888a89; /* Green */
  border: none;
  color: rgb(12, 8, 8);
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  box-shadow: 4px 4px rgba(0,0,0,0.5);
}


/* Data frame styling*/
.grid2-container {
  background-color: black;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: .1rem;
  padding: .1rem;  
}
#data-table {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start:1;
  grid-row-end:3;
  width: 60vw;  height: auto;
}
#img-frame {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start:2;
  grid-row-end:  3;
  background-color: black;
  width: 25vw;  height: auto;
}
div#img-frame img {
  max-width: 100%; overflow: hidden;
}


ul#all-vessels {  
  list-style-type: none;
  bottom: 0px;
  padding: 1px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.4);
}
#selected-vessel > li {
  text-align: left;
  margin: 5px 5%;
  
}
.th {
  
  font-size: 1rem;
  color:rgb(255, 165, 56);
}
.td {
  color: white;
  font-size: 1rem;
  float: right;
  overflow-wrap: break-word;
}
.td.dir {
  text-transform: capitalize;
}





/* Events Section */
.grid3-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  padding: 0px;  
}
#event-passenger {
  grid-column-start: 1;
  grid-column-end: 2;
  width: 20vw;  height: 20vh;
}
#event-other {
  grid-column-start: 2;
  grid-column-end: 3;
  width: 20vw;  height: 20vh;
}

li.card {
  list-style: none;
  color: black;
  /* font-family: 'Fira Sans'; */
  font-family: 'Merriweather Sans', sans-serif;
  text-align: left;
  background-color: aquamarine;
  padding-top: 0px;
  margin-top: 5px;
  width: var(--evli-wd);
  height: auto;
  margin: 6px 0px;
  border: 2px solid red;   
}

li.card.isNew {
  background-color: aquamarine;
  animation-name: colorfade;
  animation-duration: 120s;
}

@keyframes colorfade {
  0%   { background-color: aquamarine; }
  1%   { background-color: salmon;     }
  100% { background-color: aquamarine; }
}

li.card h4 {
  color: blue;
  font-size: var(--h4evt-f);
  line-height: var(--h4evt-s);
  padding: 0px 0px 0px 5px;
  margin-bottom: 5px;
  margin-top: .2rem;
}
li.card h4 time {
  color: black;
  padding-left: 25px;
}
li.card p {
  color: black;
  font-family: Arial;
  font-size: 0.6rem;
  margin-top: 0px;
  margin-bottom: 2px;
  padding: 0px 0px 0px 2px;
}
#passenger-ul {
  margin-top: 2px;
  padding-left: 10px;
}
#other-ul {
  margin-top: 2px;
  padding-left: 0px;
}

/* Waypoint section styling */
#waypoint-inner {
  background-color: rgba(81, 186, 190, 0.897);
  position: absolute;
  width: 40%;
  padding: 3px;
  border: black solid 2px;
  bottom: 25px;
  right: 25px;
  margin: auto auto;
  text-align: left;
}

em {
  color: rgb(255, 165, 56);
  font-style: normal;
}