html {
    background-color: #fefefe;
}
body{
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
/* CSS Navbar */
.topnav{
    overflow: hidden;
    background-color:/* #333*/#b02a37;
}
.topnav a{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
 }
 .topnav a:hover{
    background-color: /*#ddd*/#dc3545;
    color: #f2f2f2;
}
.topnav a.active{
    background-color: #b02a37;
    color: white;
}
.topnav .icon{
    display: none;
}
@media screen and (max-width: 600px){
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
}
@media screen and (max-width: 600px){
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}
/* Title and description CSS */
.titleDescription {
    width:95%;
    max-width: 750px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:2vw;
    padding-left:1vw;
    padding-right: 1vw;
}
/* Main div */
.mainDiv {
    width:95%;
    max-width: 750px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 5vw;
    padding-left: 1vw;
    padding-right: 1vw;
}
/* Screen div CSS */
.screenDiv{
    width: 100%;
}
/* Buttons on melding scherm */
.buttonDiv{
    margin-top:4em;
}
/* Table CSS */
table.mainMessages {
    border-collapse: collapse;
    width: 100%; 
}
.tr-row-1 {
    color:black;
    border-top-color:black;
    border-top-style: solid;
    border-top-width:1px;   
}
.tr-row-2 {
    color: grey;
    border-bottom-color:black;
    border-bottom-style: solid;
    border-bottom-width:1px;
}
.td-message {
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 0px;
    padding-right:0px;
}
.td-datetime {
    white-space: nowrap;
    padding-top: 0px;
    padding-left: 5px;
    padding-bottom:5px;
    padding-right:0px;
    font-style: italic;
}
.td-id {
    text-align: right;
    font-style: italic;
    padding-right: 5px;
/*    color:grey;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;*/
}
.td-number {
    text-align: right;
    font-style: italic;
    padding-right: 5px;
    color:grey;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}
.p1 {
    color:#dc3545;
    font-weight:bold;
    text-decoration: none;
    padding-left:0;
    margin-left:0px;
}
.p2 {
    color:#000;
    text-decoration: none;
    padding-left:0;
    margin-left:0px;
}
.p3 {
    color:#000;
    text-decoration: none;
    padding-left:0;
    margin-left:0px;
}
.p5 {
    color:#000;
    text-decoration: none;
    padding-left:0;
    margin-left:0px;
}
/* Table stats css*/
table.stats {
    color:black;
    border-collapse: collapse;
    width: 100%;
}
tr.tr-stats {
    text-align: center;
}
tr.tr-stats:nth-child(odd){
    background-color: #f2f2f2;
}

/* Table message units */
table.mainMessagesUnits {
    border-collapse: collapse;
    width: 100%; 
    border: solid 1px #f2f2f2;
}
tr.tr-statsUnits {
    text-align: left;
    
}
tr.tr-statsUnits:nth-child(4n-2), tr.tr-statsUnits:nth-child(4n-3){
    background-color: #f2f2f2;
    
}
td.td-messageUnitsText{
    padding-top:5px;
    padding-left:5px;
    padding-bottom:0px;
    padding-right:0px;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}
td.td-messageUnitsDateTime {
    width: 15ch;
    padding-top:0px;
    padding-left:5px;
    padding-bottom:5px;
    padding-right:0px;
    font-style:italic;
    border-left: 1px solid #dee2e6;
    /*border-right: 1px solid #dee2e6;*/
    border-bottom: 1px solid #dee2e6;
    color:grey;
}
a.td-messageUnitsText:link,a.td-messageUnitsText:visited,a.td-messageUnitsText:hover,a.td-messageUnitsText:active{
    text-decoration: none;
    color:black;
}
.td-stats {
    border: 1px solid #dee2e6;
    padding:2px;
}
.td-index {
    width: 30%;
}
.messageYearsList{
    color:grey;
    text-decoration: none;
    font-weight: bold;

}
/* Table scherm */
table.screen {
    border-collapse: collapse;
    width:100%;
    font-size:x-large;
    
}
tr.tr-screen:nth-child(odd){
    background-color: #f2f2f2;
    border-top: #dee2e6 solid 2px;
    border-bottom: #dee2e6 solid 2px;
}
th.screen-header {
    
    text-align: center;
    padding:0.5vw;
    font-weight:normal;
    

}
td.screen-message {
    padding:0.5vw;
    border-right:#dee2e6 solid 2px;
    white-space: nowrap;
    overflow: hidden;
    max-width:750px;
    
    
}
td.screen-datetime{
    padding:0.5vw;
    border-right:#dee2e6 solid 2px;
    white-space: nowrap;
    
}
td.screen-day{
    padding:0.5vw;
    border-right:#dee2e6 solid 2px;
    white-space: nowrap;
}
td.screen-id{
    text-align: center;
    padding:0.5vw;
    white-space: nowrap;
    
}
/* Message detail table */
table.messageVehicleTable {
    margin-top:0;
    padding-top:0;
    border: blue solid 1px;
    color: blue;
    border-spacing:0; /* Removes the cell spacing via CSS */
    border-collapse: collapse; 
}
.messageVehicleText {
    white-space: nowrap;
    padding:0;
    margin:0;
    border: green solid 1px;
    color: green;
}
/* Table vehicle list */
table.vehicleMain {
    border-collapse: collapse;
    width: 100%; 
}
tr.tr-vehicleMain {
    text-align:left;
    border-left: #dee2e6 solid 1px;
    border-right: #dee2e6 solid 1px;
}
tr.tr-vehicleMain:nth-child(odd){
    border-top:#dee2e6 solid 1px;
    border-left:#dee2e6 solid 1px;
    border-right:#dee2e6 solid 1px;
}
tr.tr-vehicleMain:nth-child(even){
    border-bottom:#dee2e6 solid 1px;
    border-left:#dee2e6 solid 1px;
    border-right:#dee2e6 solid 1px;
    color:grey;
}
tr.tr-vehicleMain:nth-child(4n-2), tr.tr-vehicleMain:nth-child(4n-3){
    background-color: #f2f2f2;
    /*border: #dee2e6 solid 1px;*/
}
td.td-vehicleText {
    padding-top:5px;
    padding-left: 5px;
    padding-bottom:0;
    padding-right:0;
}
td.td-vehicleCallsign {
    padding-top:0;
    padding-left: 5px;
    padding-bottom:5px;
    padding-right:0px;
    font-style: italic;
}

/* Grafieken CSS */
canvas {
    width:100%;
    max-width:600px;
    margin-left: auto;
    margin-right:auto;
}
/* Melding detail CSS */
.messageDetail{
    color:black;
    margin:0px;
    padding:0px;
}
.messageDetailLabel {
    font-weight: bold;
    /*text-decoration: underline;*/
    margin:0px;
    padding:0px;
}
.messageDetailValue{
    margin-top:0;
    margin-left:0;
    margin-bottom:1vw;
    margin-right:0;
    padding-top:0;
    padding-left:2px;
    padding-bottom:0;
    padding-right:0;
}
.button {
    /*font: bold 11px Arial;*/
    text-decoration: none;
    text-align:center;
    background-color: #dc3545;
    color: #fff;
    padding: 6px 12px;
    border: 1px solid #b02a37;
    border-radius:4px;
}
/* Lijst style */
ul {
    list-style-type: none;
    margin:0;
    margin-bottom:1vw;
    padding-left:2px;
}
/* Link naar voertuigen op melding pagina */
a.unitsLink {
    text-decoration: none;
    color: black;
}