:root {
  --large-font-size: 2em;
  --top-header-height: 40px;
  --bot-header-height: 40px;
  --footer-height: 30px;
  --main-height: calc(100vh - var(--top-header-height) - var(--bot-header-height) - var(--footer-height));
  --button-height: 24px;
}

:root {
  --redcolor: darkred;
  --bg-color: #fff;
  --bg2-color: #eee;
  --bg-footer-color: #eee;
  --txt-color: #444;
  --link-color: --txt-color;
  --link-color-hover: #55f;
  --link-hover-bg: #eee;
  --header-bg: white;
  --header-txt: darkred;
  --bg-error-color: #DA5E51;
  --txt-error-color: white;
  --line-color: #555;
  --bg-lighter-color: #aaa;
  --blokje-bg-color: #333;
  --blokje-bg2-color: #444;
  --border: 1px solid --line-color;
  --input-bg: --bg-lighter-color;
  --input-txt-color: black;
  --bg-status-color: #222;
  --txt-status-color: #000;
  --input-color: navy;
  --input-bg: #eee;
  --input-border-color: navy;
  --input-border-focus-color: #ccc;
  --input-bg-focus: #fff;
  --input-txt-focus: red;
  --button-bg: #ccc;
  --button-color: --redcolor;
  --button-border: 1px solid navy;
  --button-hover-bg: --redcolor;
  --button-hover-color: white;
  --button-hover-border: 1px solid black;
  --border: 1px solid #ccc;
}

h1, h2, h3, h4, h5, p, body, th, td {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

th, td {
  text-align: left;
}

body {
  font-family: "Lato", sans-serif;
}

input {
  color: var(--input-color);
  background-color: var(--input-bg);
  border: 1px solid var(--input-border-color);
  border-radius: 3px;
  padding: 3px 5px;
}
input.focus {
  border: 11px solid var(--input-border-focus-color);
  background-color: var(--input-bg-focus);
  color: var(--input-txt-focus);
}

.bb {
  border-bottom: var(--border);
}

.tb {
  border-top: var(--border);
}

.hidden {
  display: none !important;
}

table {
  margin: 10px auto;
  border-spacing: 0;
}
table td, table th {
  padding: 10px;
  border: 1px solid #eee;
}
table td.indent, table th.indent {
  padding-left: 2em;
}
table td.r, table th.r {
  text-align: right;
}
table td.b, table th.b {
  font-weight: bold;
}

a.button {
  display: inline-block;
  line-height: var(--button-height);
  border: 1px solid #ccc;
  background-color: white;
  padding: 0 10px;
  border-radius: 3px;
  color: darkblue;
  text-decoration: none;
  text-transform: uppercase;
}
a.button:hover {
  background-color: darkblue;
  color: white;
  cursor: pointer;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--bg-color);
  color: var(--txt-color);
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

#header {
  text-align: center;
}

#page {
  flex: 1;
  width: 100vw;
  min-height: var(--main-height);
}
#page.simple {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
  align-items: start;
}
#page .overzicht {
  display: flex;
  flex-direction: row;
}
#page .overzicht > div {
  padding: 15px;
  flex: 50%;
  text-align: center;
}

#footer {
  height: var(--footer-height);
  text-align: center;
  width: 100vw;
  background-color: var(--bg-footer-color);
  line-height: 30px;
}

.dialog-modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  cursor: pointer;
}
.dialog-modal .dialog {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 3px solid #888;
  max-width: 80%; /* Could be more or less, depending on screen size */
  min-width: 200px;
  width: 300px;
}

.standard-chart {
  height: 30vh;
}

.week-pagina h2 {
  text-align: center;
}
.week-pagina .week-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.week-pagina .week-grid > div {
  padding: 3px 5px;
}
.week-pagina .week-grid > div.dag {
  font-weight: bold;
  text-align: right;
}
.week-pagina .week-grid > div.data {
  text-align: right;
  padding-right: 20px;
}

.standard-pagina {
  padding: 20px;
}
.standard-pagina h2 {
  text-align: center;
}

.tabs-main {
  padding: 20px;
}
.tabs-main .tabs-nav {
  display: flex;
}
.tabs-main .tabs-nav .tabs-nav-item {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  margin-right: 5px;
  border: 1px solid grey;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  text-align: center;
  min-width: 100px;
  background-color: lightgrey;
  cursor: pointer;
}
.tabs-main .tabs-nav .tabs-nav-item:hover {
  background-color: darkblue;
  color: white;
}
.tabs-main .tabs-nav .tabs-nav-item.selected {
  border-bottom: 1px solid white;
  background-color: white;
  cursor: default;
}
.tabs-main .tabs-nav .tabs-nav-item.selected:hover {
  background-color: white;
  color: black;
}
.tabs-main .tabs-content {
  margin-top: -1px;
}
.tabs-main .tabs-content .tabs-nav-block {
  display: none;
  padding: 10px;
  border: 1px solid grey;
  min-height: 300px;
}
.tabs-main .tabs-content .tabs-nav-block.selected {
  display: block;
}

#header {
  background-color: var(--header-bg);
  color: var(--header-txt);
  border-bottom: var(--border);
  height: var(--header-height);
  width: 100vw;
  line-height: var(--header-height);
  display: block;
}
#header .top {
  width: inherit;
  height: var(--top-header-height);
  line-height: var(--top-header-height);
  display: flex;
}
#header .top h1 {
  flex: 1;
  font-family: "Vast Shadow";
  font-size: var(--large-font-size);
}
#header .top .dummy {
  width: 30px;
}
#header .top .js-menu {
  width: 30px;
  margin-right: 10px;
  padding: 0 5px;
}
#header .top .js-menu:hover {
  background-color: var(--link-hover-bg);
  cursor: pointer;
}
#header .bot {
  width: inherit;
  height: var(--bot-header-height);
  line-height: var(--bot-header-height);
  background-color: green;
  display: flex;
}
#header .bot .left-header {
  min-width: 100px;
  text-align: left;
}
#header .bot .right-header {
  min-width: 100px;
  text-align: right;
}
#header .bot .middle-header {
  flex: 1;
}
#header nav {
  display: block;
  position: absolute;
  right: 0;
  top: 31px;
  width: auto;
  border-left: var(--button-border);
  z-index: 1;
}
#header nav a {
  background-color: white;
  text-align: left;
  display: block;
  height: 28px;
  line-height: 28px;
  padding: 0 20px;
  border-radius: 2px;
  border-bottom: var(--button-border);
  color: var(--button-color);
  text-decoration: none;
}
#header nav a:hover {
  background-color: var(--link-hover-bg);
}

.login-dialog {
  width: 300px;
  height: auto;
  margin-top: 50px;
  padding-top: 20px;
  border-radius: 3px;
  border: var(--border);
  background-color: white;
}
.login-dialog .login-grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}
.login-dialog .login-grid span.left, .login-dialog .login-grid span.right {
  height: 32px;
  text-align: left;
  line-height: 32px;
}
.login-dialog .login-grid span.left input[type=text], .login-dialog .login-grid span.left input[type=password], .login-dialog .login-grid span.right input[type=text], .login-dialog .login-grid span.right input[type=password] {
  height: 28px;
  width: 98%;
}

.select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 20px;
  grid-gap: 50px;
}
.select-grid a.identifier {
  border: 3px solid green;
  border-radius: 5px;
  background-color: rgba(0, 0, 1, 0.1);
  padding: 10px;
  text-decoration: none;
  text-align: center;
  color: darkblue;
  filter: opacity(0.7);
}
.select-grid a.identifier:visited, .select-grid a.identifier:hover, .select-grid a.identifier:active {
  color: darkblue;
}
.select-grid a.identifier:hover {
  filter: opacity(1);
}

h1.titel {
  padding: 10px 0;
  background-color: palegreen;
  margin-bottom: 10px;
}

.tabel {
  display: grid;
  grid-template-columns: minmax(100px, 20%) 1fr;
  grid-gap: 10px;
}
.tabel span {
  border: 1px solid #eee;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 300px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -150px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover {
  cursor: help;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tabel {
  width: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.tabel .tabel-header-rij, .tabel .tabel-rij {
  width: calc(100% - 30px);
  display: flex;
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
}
.tabel .tabel-header-rij .cell, .tabel .tabel-rij .cell {
  flex: 1;
  padding: 8px;
  background-color: #eee;
  border-right: 1px solid grey;
  text-align: right;
}
.tabel .tabel-header-rij .cell:first-child, .tabel .tabel-rij .cell:first-child {
  border-left: 1px solid grey;
}
.tabel .tabel-header-rij .cell.b, .tabel .tabel-rij .cell.b {
  font-weight: bold;
}
.tabel .tabel-header-rij .cell.c, .tabel .tabel-rij .cell.c {
  text-align: center;
}

html.mobile body {
  font-size: 10px;
}
html.mobile body #header .top {
  background-color: orange;
}
html.mobile body #header .top .js-menu {
  margin-right: 3px;
  padding: 0;
  font-size: 20px;
}
html.mobile body #header .bot .left, html.mobile body #header .bot .right, html.mobile body #header .bot .middle {
  width: 20vw;
}
html.mobile body #header .bot .left a.button, html.mobile body #header .bot .right a.button, html.mobile body #header .bot .middle a.button {
  font-size: 7pt;
}
html.mobile body .select-grid {
  grid-template-columns: 1fr;
  padding: 10px;
  grid-gap: 10px;
}
html.mobile .overzicht {
  display: flex;
  flex-wrap: wrap;
}
html.mobile .overzicht > div {
  flex: 100%;
}
html.mobile .overzicht > div table {
  width: 100%;
}
html.mobile .tabel {
  font-size: 9px;
}

/*# sourceMappingURL=style.css.map */