/* Gebruikte kleuren:
#007800: donkergroen
#006400: darkgreen
#0000ff: blue
#000000: zwart (->donkergrijs?)
#e6ffe6: lichtgroen
hsl(240, 50%, 50%): blauw

var-functie: https://www.w3schools.com/css/css3_variables.asp
*/

:root {
  --donkergroen: #007800;
  --lichtgroen: #e6ffe6;
  --white: #ffffff;
  --blauw: hsl(240, 50%, 50%);
}

.w3-theme-l4 {color:var(--blauw) !important; background-color:var(--lichtgroen) !important}
.w3-theme-l5 {color:#000 !important; background-color:#ffffff !important}
.w3-theme-l3 {color:var(--blauw) !important; background-color:#ffffff !important}
.w3-theme-l2 {color:var(--donkergroen) !important; background-color:#ffffff !important}
.w3-theme-l1 {color:#fff !important; background-color:#333333 !important}
.w3-theme-d1 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d2 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d3 {color:#fff !important; background-color:#101010 !important}
.w3-theme-d4 {color:#fff !important; background-color:var(--blauw) !important}
.w3-theme-d5 {color:#fff !important; background-color:var(--donkergroen) !important}

.w3-theme-light {color:#000 !important; background-color:#f0f0f0 !important}
.w3-theme-dark {color:#fff !important; background-color:#000000 !important}
.w3-theme-action {color:#fff !important; background-color:red !important}

.w3-theme {color:#fff !important; background-color:#000000 !important}
.w3-text-theme {color:#000000 !important}
.w3-border-theme {border-color:#000000 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#000000 !important}
.w3-hover-text-theme:hover {color:#000000 !important}
.w3-hover-border-theme:hover {border-color:#000000 !important}

th {color:#fff; background-color:var(--donkergroen)}
tr:hover {color:var(--blauw); background-color:var(--lichtgroen); font-weight:bold;}
ul {color:var(--donkergroen); background-color:var(--lichtgroen)}

html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;}
.w3-sidebar {
  z-index: 3;
  width: 250px;
  top: 43px;
  bottom: 0;
  height: inherit;
  color:hsl(240, 50%, 50%);
  background-color:#e6ffe6;
}
h1,marquee { color: #007800; }

.gr-menu-item:hover { color:#e6ffe6 !important; background-color:#006400 !important}  


.footer  { position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; font-size: 1em;color:#fff !important; background-color:var(--donkergroen) !important}
hr { border-top: 4px solid hsl(240, 50%, 50%); }