/* -------------- FONT -------------- */ 

/* vietnamese */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v7/QGYsz_wNahGAdqQ43Rh_c6DptfpA4cD3.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v7/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v7/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v7/QGYsz_wNahGAdqQ43Rh_c6DptfpA4cD3.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v7/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v7/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }



/* -------------- GRID -------------- */ 

.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: 80px 1fr 2fr 80px; */
  grid-template-rows: 1fr 1fr 1fr 80px;
  grid-template-areas: 'myHeader myContent myInfo myFooter' ;
  grid-gap: 0px;
  padding: 0px;
  border: 0px;
  width: 100%;
}
  
/* .container > div {
  text-align: center;
  padding: 0px;
  margin: 0px;
  border: 0px;
} */

.header {
  grid-area: myHeader;
  border: 0px rgb(0, 0, 0);
  background-color:rgb(25, 28, 31);
  padding-top: 2%;
  padding-left: 0px;
  padding-right: 10%;
  padding-bottom: 0px;
  /* text-align: right; */
}
 
.content {
  grid-area: myContent;
  background-color:rgb(25, 28, 31);
  border: 0px;
  padding-top: 0%;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  text-align: center;
}

.info {
  grid-area: myInfo;
  background-color:rgb(25, 28, 31);
  border: 0px;
  padding-top: 0%;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

.footer {
  grid-area: myFooter;
  /* height: 80px; */
  background-color:rgb(25, 28, 31);
  padding-top: 0%;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

.responsive {
  max-width: 100%;
  max-height: 100%;
}

.live {
  max-width: 8%;
  max-height: 8%;
}


/* -------------- id -------------- */ 

/* startlogo */
#startlogo {
  width: 65%;
  padding-top: 10%
}

/* headerlogo */
#headerlogo {
  width: 25%;
  padding-left: 80%;
}

/* map */
#map {
  width: 50%;
}



/* buttons td */
.but {
  vertical-align: top;
  padding-top: 8px;
}

/* buttons */
#start, #stop {
    background-color: rgb(49, 94, 136);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: white;
    width: 104px;
    height: 26px;
    text-align: center;
}





/* -------------- HTML -------------- */ 


body {
  background-color:rgb(25, 28, 31);
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  margin: 0px;
}

h1 { 
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  /* color: rgb(92, 242, 255); */
  color: rgb(92, 242, 255);
  text-align: right;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;

}

h3 { 
  /* background-color: rgb(26, 38, 61); */
  font-weight: 400;
  font-size: 18px;
  height: 80px;
  text-align: left;
  padding-top: 7px;
  padding-left: 20px;
  /* color: rgb(92, 242, 255); */
  color :rgb(82, 96, 109);
}

p {
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  /* color: rgba(92, 241, 255, 0.7); */
  color :rgb(82, 96, 109);
} 

table {
	border-collapse: collpase;
	border-spacing: 0;
	border-width: 0;
	/* margin: 0 0 1em;*/
	table-layout: auto;
	width: 350px;
}

th, td {
  font-size: 18px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  padding-left: 20px;
  padding-right: 20px;
  /* text-indent: 20px; */
  height: 27px;
  vertical-align: top;
}

th {
  text-align: left;
  width: 70%;
}

td {
  text-align: right;
  width: auto;
  /* margin-right: 20px;*/
}






/* -------------- MOBILE -------------- */ 

@media only screen and (max-width: 720px){


  /* -------------- grid -------------- */ 

  .container{
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 5fr 1fr 1fr;
   grid-template-areas: 'myHeader myContent myInfo myFooter' ;
   grid-gap: 0px;
   padding: 0px;
   border: 0px;
   width: 100%;
  } 

  .header {
    grid-area: myHeader;
    padding-top: 3%;
  }

  .content {
    grid-area: myContent;
  } 

  .info {
    grid-area: myInfo;
  }

  .footer {
    grid-area: myFooter;
    padding-top: 1%;
  } 


  /* -------------- other -------------- */ 

  /* startlogo */
  #startlogo {
    width: 70%;
    padding-top: 20%;
  }

  /* headerlogo */
  #headerlogo {
    width: 35%;
    padding-left: 70%;
  }

  /* map */
  #map {
    width: 80%;
  }

  .responsive {
    max-width: 100%;
    max-height: 100%;
  }

  .live {
    max-width: 15%;
    max-height: 15%;
  }


  /* -------------- html -------------- */ 

  body {
    background-color:rgb(25, 28, 31);
/*     background-image: "../files/BlackUnicorn_Soundtrek_BG.jpg";
 */    background-repeat: no-repeat;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    margin: 0px;
  }

  h1 { 
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    /* color: rgb(92, 242, 255); */
    color :rgb(82, 96, 109);
    text-align: left;
    padding-top: 20px;
    padding-left: 20px;
  }

 h3 { 
    height: 35px;
    text-align: left;
    padding-top: 10px;
    padding-left: 20px;
    /* color: rgb(92, 242, 255);  */
    color :rgb(82, 96, 109);
    font-size: 24px;
    font-weight: 400;
 }

 p {
     text-align: center;
     font-size: 14px;
     line-height: 17px;
     color :rgb(82, 96, 109);
    }

}