:root {
    color-scheme: light dark;
    --border: 4px;
    --c1: light-dark(#ffffffff, #001144ff);
    --c2: light-dark(#001144aa, #ffffffaa);
    --c3: light-dark(#aaaaaaff, #666666ff);
    --c101: light-dark(#001144ff, #001144ff);
    --c102: light-dark(#0000ffff, #0000ffff);
    --c103: light-dark(#00aaffff, #00aaffff);
    --c104: light-dark(#88aa88ff, #88aa88ff);
    --c105: light-dark(#22aa88ff, #22aa88ff);
    --c106: light-dark(#22aa44ff, #22aa44ff);
    --c107: light-dark(#88cc44ff, #88cc44ff);
    --c108: light-dark(#ffaa00ff, #ffaa00ff);
    --c109: light-dark(#ff6600ff, #ff6600ff);
    --c110: light-dark(#ff0000ff, #ff0000ff);
    --c111: light-dark(#aa00aaff, #aa00aaff);
}
  
.sens {
    border-radius: 8px;
    border: var(--border);
    padding: 2px 8px 2px 8px;
    margin: 4px;
    max-width: 400px;
    width: 100%;
}
.darkblue {
    background: var(--c101);
    color: var(--c1);
    border: var(--border) var(--c101) solid;
}
.blue {
    color: var(--c102);
    background: var(--c1);
    border: var(--border) var(--c102) solid;
}
.lightblue {
    color: var(--c103);
    background: var(--c1);
    border: var(--border) var(--c103) solid;
}
.lightgreen {
    color: var(--c104);
    background: var(--c1);
    border: var(--border) var(--c104) solid;
}
.darkgreen {
    color: var(--c105);
    background: var(--c1);
    border: var(--border) var(--c105) solid;
}
.green {
    color: var(--c106);
    background: var(--c1);
    border: var(--border) var(--c106) solid;
}
.lightgreen {
    color: var(--c107);
    background: var(--c1);
    border: var(--border) var(--c107) solid;
}
.yellow {
    color: var(--c108);
    background: var(--c1);
    border: var(--border) var(--c108) solid;
}
.orange {
    color: var(--c109);
    background: var(--c1);
    border: var(--border) var(--c109) solid;
}
.red {
    background: var(--c110);
    color: var(--c1);
    border: var(--border) var(--c110) solid;
}
.violett {
    background: var(--c111);
    color: var(--c1);
    border: var(--border) var(--c111) solid;
}
.black {
    background: var(--c1);
    color: var(--c3);
    border: var(--border) var(--c3) solid;
}
.sens:hover {
    background: var(--c1);
    color: var(--c2);
    border: var(--border) var(--c2) solid; 
}
.tab-ac {
      display: grid;
      margin: 4px;
      grid-template-columns: 100px 100px;
}
.right {
      float: right;
}
  
#sensoren {
    position: relative;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
}