body { font-family: Verdana, sans-serif;  font-weight: light; }
.counter,.code,.date,.kg,.freq,.zeta { text-align: center; font-family: monospace; font-size: 1.2em;}
.action { text-align:center;}
.person { text-align: left; font-family: monospace; font-size: 1.2em;}
.degree, .weight { text-align: right; font-family: monospace; font-size: 1.2em;}
.smartamp { font-weight: light; font-size: 8pt; color: gray; }
table { border-color: gray; border-width: 1px 0 0 1px; border-style: solid; }
th, td { border-color: gray; border-width: 0 1px 1px 0; border-style: solid; }
th, td div { padding: 2px 5px; }
div.hr { background-color: #ffec00; height: 4px; }
div.nav-left { float: left; margin: 0; padding: 0 0 120px; width: 200px; background-color: #008566; color: white; }
div.nav-left p { margin-bottom: 0; margin-left: 0.5em;  font-size: 0.7em;}
div.nav-left ul { font-size: 0.9em; }
/*ul.nav-vertical { list-style: none outside none; }*/
ul.nav-vertical { margin: 0; padding: 0; }
ul.nav-vertical li { margin: 0 0 0 2em; padding: 0 0.5em 0 0; }
ul.nav-vertical a { font-weight: lighter; text-decoration: none; color: white; }
div.content { margin-left: 220px; }
table.list { border: solid gray; border-width: 1px 0 0 1px; }
table.list td { padding-top: 0; padding-bottom: 0; padding-left: 0; margin: 0; border: solid gray; border-width: 0 1px 1px 0; }
td {padding-right: 5px;}
table.list th { padding: 2px 5px; margin: 0; border: solid gray; border-width: 0 1px 1px 0; background-color: #ddd; text-align: center; font-weight: normal; }
th { font-size: 0.7em; }
table.list td div { margin: 0; border: 0; }
.tab { background-color: #eee; padding: 3px 5px 3px; line-height: 2em; }
.tab a, .tab span { padding: 2px 5px; border: 1px solid black; border-bottom-width: 0px;} 
.tab a { background-color: #ccc; white-space: nowrap; }
.tab span { background-color: white; white-space: nowrap; } 
.alert { color: #CC3333; }
.batch-nav-bar img { display: block; }
.info { color: gray; font-size: 0.8em; }

/**
 * Google Map
 */
.exanpe-gmap .exanpe-gmap-map, #map {float: left;}
.exanpe-gmap .exanpe-gmap-sidebar, .map-sidebar {float: left;}

#exanpe-gmap-bus, #map { width: 800px; }
#exanpe-gmap-bus, #map, .map-sidebar, .exanpe-gmap-sidebar { height: 800px; }
.exanpe-gmap-sidebar, .map-sidebar { overflow-y: scroll;}
.exanpe-gmap-sidebar li, .map-sidebar li {font-family: monospace;}
.exanpe-gmap .exanpe-gmap-map {height: 500px; width: 500px;}
.exanpe-gmap .exanpe-gmap-sidebar {width: 300px; margin-left: 20px;}
.exanpe-gmap .exanpe-gmap-sidebar span {cursor: pointer;}

h1 { /*font-size: 1.8em;*/ font-weight: normal; margin-top: 0.1em; }

/*label.field-label { width: 250px; float: left; }*/
/*form.weighbridge div.field-label { margin: 1em; }*/

.long-data { word-break: break-all; }
.original-label { color: #777; font-size: 0.7em; }
.original { color: #777; }

.search td, .list td { vertical-align: top; }

table.list td.blank, table.list th.blank { background-color: white; border-bottom: 1px solid white; width: 2em; }
span.actionlink { margin-right:3em; }
@media print {
  .noprint, .exanpe-gmap-sidebar {display: none;}
  div.content { margin-left: 10pt; }
}

.version-info { margin-top:10em; }
.version-info div {font-size: 0.7em; margin-left: 2em;}
.audit { font-size: 0.7em; color: #333; }

/* The following line caused problems in Google Chrome on Windows in April 2022. Not a problem in August 2022 */
div#listEnumRole { column-count: 3; border-top: 1px solid gray; border-bottom: 1px solid gray; }

div#listEnumRole .checkbox { margin-top: 0px; margin-bottom: 0px; } /* Tapestry 5.4*/

.chart { margin-top: 1em; margin-bottom: 1em; }
.chart-table { margin-left: 5em; margin-right: 5em; margin-top: 0.3em; margin-bottom: 1em; display: inline-block; }

.datePicker td a.topLabel { color: black; }
.datefield { white-space:nowrap; }
.datefield input {width: 10em; text-align: center;}

.kg, .kg input {text-align: center;}
input, select { margin: 2px; }
form#formSearchTruck { width: 50%; min-width: 300px; }

.docket .label { color: black; }

/* Colour coding for SMU report */
tr.current td { background-color: lightgreen; color: black;}
tr.recent1 td { background-color: bisque; color: black;}
tr.recent2 td { background-color: sandybrown; color: black;}
tr.recent3 td { background-color: orange; color: black;}
tr.old td { background-color: #ff8f8f; color: black;}