:root {
  --bloemertlight-color: rgba(174, 142, 67, 1);
  --bloemertdark-color: rgba(2, 21, 49, 1);
  --bloemertshadow-color: rgba(2, 21, 49, 0.5);
  --vue-color: rgba(66, 185, 131, 1);
  --vuedark-color: rgba(52, 73, 94, 1);
}

html,
body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
  margin: 0px;
}

.wrapper {
  height: 100%;
  width: 100%;
  display: table;
}

.bloemert {
  color: var(--bloemertlight-color);
}

.vue {
  color: var(--vue-color);
}

header {
  padding: 10px;
}

footer {
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 10px;
  background-color: var(--vuedark-color);
  color: var(--bloemertlight-color);
  height: 100px;
}

.header,
.content,
.footer {
  display: table-row;
}

.inner {
  display: table-cell;
}

.content .inner {
  height: 100%;
  position: relative;
}

.scrollable {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}