html {
  height: 100%;
  background-color: #b69c9c; }

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto; }
  body .bg-navigatie {
    background-color: #E5F1E0;
    background-color: #D4EDDA; }
  body .bg-browse {
    background-color: #eeeff1;
    background-color: #e9ecef; }
  body a.versie {
    color: #083194; }

.footer {
  grid-row-start: 2;
  grid-row-end: 3; }

.functie-header {
  display: flex;
  flex-direction: row;
  justify-content: start;
  margin-bottom: 5px;
  padding-left: 0;
  padding-right: 0; }
  .functie-header.browse-klanten {
    justify-content: space-between; }

div.klant-row {
  margin-bottom: 2px;
  cursor: default;
  /* Hover gedrag alleen bij "gevulde" klant-row */ }
  div.klant-row.js-klant:hover {
    background-color: #17A2B8;
    background-color: #E5F1E0;
    background-color: #D4EDDA; }
  div.klant-row.selected {
    background-color: #17A2B8;
    background-color: #E5F1E0;
    background-color: #D4EDDA;
    font-weight: bold; }

div.klant-column {
  padding: 2px 2px 2px 2px;
  line-height: 25px; }
  div.klant-column a {
    margin-left: 1px;
    /*font-size: 85%;*/ }
  div.klant-column .form-control {
    height: calc(1em + 0.5rem + 2px) !important;
    padding: 0rem 0.3rem !important; }
  div.klant-column div {
    padding-left: 2px;
    padding-right: 2px;
    /*font-size: 85%;*/ }
    div.klant-column div.column-sort {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center; }
      div.klant-column div.column-sort a {
        font-weight: bold;
        color: #6c757d; }
      div.klant-column div.column-sort span {
        color: #6c757d;
        min-height: 20px; }
    div.klant-column div.column-value {
      height: 27px; }
  div.klant-column.naam {
    min-width: 245px;
    max-width: 245px; }
  div.klant-column.geslacht {
    min-width: 100px;
    max-width: 100px; }
  div.klant-column.geboortedatum {
    min-width: 120px;
    max-width: 120px; }
  div.klant-column.adres {
    min-width: 245px;
    max-width: 245px; }
  div.klant-column.route {
    min-width: 80px;
    max-width: 80px; }
  div.klant-column.debiteurnummer {
    min-width: 110px;
    max-width: 110px; }
  div.klant-column.code {
    min-width: 90px;
    max-width: 90px; }

.klant {
  display: flex;
  flex-direction: row;
  justify-content: start;
  font-size: 85%;
  background-color: #f4f4f4;
  margin-bottom: 2px; }
  .klant:hover {
    background-color: #5cb85c;
    background-color: #17A2B8; }
  .klant div {
    padding: 2px 5px 2px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
    .klant div.klant-naam {
      min-width: 200px;
      max-width: 200px; }
    .klant div.klant-geslacht {
      margin-left: 5px;
      min-width: 100px;
      max-width: 100px; }
    .klant div.klant-geboortedatum {
      margin-left: 5px;
      min-width: 100px;
      max-width: 100px; }
    .klant div.klant-adres {
      margin-left: 5px;
      min-width: 200px;
      max-width: 200px; }
    .klant div.klant-route {
      margin-left: 5px;
      min-width: 70px;
      max-width: 70px; }
    .klant div.klant-debiteurnummer {
      margin-left: 5px;
      min-width: 70px;
      max-width: 70px; }
    .klant div.klant-code {
      margin-left: 5px;
      min-width: 70px;
      max-width: 70px; }
    .klant div.klant-actief {
      margin-left: 5px;
      width: 100%; }