:root {
  --vccoral: #e84249;
  --vcsalmon: #f8bbaa;
  --vcaubergine: #702b4f;
  --vclilac: #c8a4b3;
  --vcheaven: #b7dae0;
  --vccaqua: #eff7f6;
  --vccloud: #e0f1f5;
  --vcpetrol: #009ba4;
  --vcteal: #97d1cb;
  --vcyellow: #ffd500;
  --vccream: #ffefaf;
  --vcanthrazit: #3d3d3c;
}

a {
  text-decoration: none !important;
}

h1,h2,h3,h4,h5 {
  text-transform: uppercase;
  color: var(--vcanthrazit);
}

.active {
  color: #ffffff;
  background-color: var(--vcpetrol) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--vcpetrol);
  color: white;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 250px;}

/* Set gray background color and 100% height */
.sidenav {
  background-color: #fff;
  height: 100%;
}

/* TABLES */
table {
  display: block;
  height: 200px;
  overflow-y: scroll;
  table-layout: fixed;
}

th {
  background-color: var(--vcanthrazit);
  color:white;
  position: sticky;
  top: 0; z-index: 1;
}

tr:nth-child(even) {background-color: var(--vccream);}
tr:nth-child(odd) {background-color: var(--vcsalmon);}

/* replace table by div with classes as specified */
.table {
    display: table;
    width: 100%;
    height: 20px;
}

.table-header {
  display: table-cell;
  padding: 10px 6px;
  background-color: var(--vcanthrazit);
  color: white;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-cell {
    display: table-cell;
    padding: 2px 0px 2px 6px;
}

.table-row {
    display: table-row;
    width: 100%;
}

.block {
    display: block;
    width: 100%;
    background: green;
}
.table-row:nth-child(even) {background-color: var(--vccream);}
.table-row:nth-child(odd) {background-color: var(--vcsalmon);}

/* fuer db tabellen die als div tabellen mit 100% breite angezeigt werden*/
.dbtable {
  display: block;
  height: 200px;
  overflow-y: scroll;
}

.hide {
  display:none;
}

hr {
  margin: 3px 0px;
}