:root {
   --dala-blue: #42698c; /* RAL 5023 - Distant blue */
   --primary: #05386B;
   --canyon-bkg: rgb(24,24,21);
   --pic-height: 100px;
   --table-color: #EDF5E1;
   --white: #f1ece1; /* RAL 9010 - Pure white */
   --main-bg-color: #6c7c59; /* RAL 6011 - Reseda green */
   --shadow: 5px 5px 5px #444;
}
html, body {
   box-sizing: border-box;
   width: 100%;
   margin: 0;
   padding: 0;
   font-family: helvetica, sans-serif;
   background-color: var(--main-bg-color);
   list-style: none;
   text-decoration: none;
}
.pic-1 {
   justify-self: end;
   height: 100px;
   border-radius: 5px;
}
.tr-year {
   padding-bottom: 2px;
   padding-top: 2px;
   border: none;
   width: 180px;
   vertical-align: middle;
   color: black;
   background-color: var(--table-color);
   cursor: pointer;
}
.tr-year:hover {
   background-color: var(--main-bg-color);
   color: var(--white);
}
h3 {
   display: flex;
   width: 100%;
   align-items: center;
   margin: 35px 0;
   color: var(--table-color);
   background-color: var(--dala-blue);
   letter-spacing: 2px;
}
h3::before, h3::after {
   content: "";
   border: solid var(--table-color);
   border-width: .05em 0;
   height: .1em;
   margin: .3em;
   flex: 1;
}
.right-arrow {
   height: 10px;
   vertical-align: middle;
   padding-left: 5px;
}
.bike-icon {
   height: 16px;
   vertical-align: middle;
}
.table-container {
   width: 80%;
   font-size: 0.8em;
   box-shadow: var(--shadow);
}
.shadow {
   box-shadow: var(--shadow);
   border: 1px solid #444;
}
.header-content {
   display: flex;
   flex-direction: row;
   margin: 10px;
   padding: 8px;
   text-align: center;
   background-color: var(--dala-blue);
   border-radius: 5px;
}
.footer-content {
   margin: 30px 10px 30px; /* top, left+right, bottom */
   height: auto;
   text-align: center;
   background-color: var(--dala-blue);
   color: var(--primary);
   border-radius: 5px;
}
#map {
   width: 80%;
   height: 600px;
   border: solid 1px var(--dala-blue);
   margin: auto;
}
tfoot {
   color: black;
   background-color: var(--table-color);
}
.tr-month {
   color: black;
   background-color: var(--table-color);
   cursor: pointer;
}
.tr-month-over {
   color: var(--table-color);
   background-color: var(--main-bg-color);
/*   cursor: pointer;*/
}
.tr-month-selected {
   color: var(--table-color);
   background-color: var(--main-bg-color);
}
.tr-summary {
   border: solid 1px black;
   color: var(--white);
   background-color: var(--dala-blue);
}
table {
   border-collapse: collapse;
}
caption {
   padding: 0.25em 0.25em 0.25em 0.25em;
   color: var(--white);
   background-color: var(--dala-blue);
}
th {
   border: solid 1px black;
   padding: 0.25em 0.25em 0.25em 0.25em;
   color: var(--white);
   background-color: var(--dala-blue);
}
td {
   text-align: center;
   border: solid 1px black;
}
input[type=checkbox] {
   display: none;
}
.dropdown {
   position: relative;
   display: block;
   z-index: 100000;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: var(--white);
   opacity: 0.95;
   width: auto;
   border: solid 1px black;
   font-weight: normal;
   z-index: 1;
}
.dropdown:hover .dropdown-content {
   display: block;
}
.navigation {
   margin: auto;
   width: 20px;
   cursor: pointer;
}
.navigation::after,
.navigation::before,
.navigation div {
   background-color: var(--white);
   content: '';
   display: block;
   height: 2px;
   margin: 3px 0;
   transition: all 0.25s ease-in-out;
}
.navigation.open:before {
   transform: translateY(5px) rotate(135deg);
}
.navigation.open:after {
   transform: translateY(-5px) rotate(-135deg);
}
.navigation.open div {
   transform: scale(0);
}
#menu {
   display: none;
}
#menu.open {
   display: block;
   transition: all 5.0s ease-in-out;
}
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
li {
   width: 180px;
   color: black;
   text-align: left;
   background-color: var(--table-color);
   cursor: pointer;
   padding-top:2px;
   padding-bottom:2px;
}
li:hover {
   background-color: var(--main-bg-color);
   color: var(--white);
}
.year-container {
   display: none;
}
.year-container-open {
   display: block;
   transition: all 5.0s ease-in-out;
}
.td-style {
   width: 40px;
   border:none;
}
.td-distance {
   width: 60px;
   border:none;
}
.menu-header {
   background-color: var(--main-bg-color);
   color: var(--white);
   border-bottom: solid 1px black;
   padding-top: 3px;
   padding-bottom: 3px;
}