:root {
  --gp-primary: #a80556;
  --gp-primary-rgb: 168, 5, 86;
  --contao: var(--gp-primary);
  --contao-rgb: var(--gp-primary-rgb);
  --header-bg: var(--gp-primary);
}

.vr--grid-pos-container {
  margin: 3px 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;
}
.vr--grid-pos-container[data-cols="1"] {
  grid-template-columns: repeat(1, 1fr);
}
.vr--grid-pos-container[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.vr--grid-pos-container[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.vr--grid-pos-container[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}
.vr--grid-pos-container[data-cols="5"] {
  grid-template-columns: repeat(5, 1fr);
}
.vr--grid-pos-container[data-cols="6"] {
  grid-template-columns: repeat(6, 1fr);
}
.vr--grid-pos-container[data-cols="7"] {
  grid-template-columns: repeat(7, 1fr);
}
.vr--grid-pos-container[data-cols="8"] {
  grid-template-columns: repeat(8, 1fr);
}
.vr--grid-pos-container[data-cols="9"] {
  grid-template-columns: repeat(9, 1fr);
}
.vr--grid-pos-container[data-cols="10"] {
  grid-template-columns: repeat(10, 1fr);
}
.vr--grid-pos-container[data-cols="11"] {
  grid-template-columns: repeat(11, 1fr);
}
.vr--grid-pos-container[data-cols="12"] {
  grid-template-columns: repeat(12, 1fr);
}

.grid-cell {
  height: 30px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.grid-cell:hover {
  background-color: rgba(var(--contao-rgb), 0.3);
}
.grid-cell.selected {
  background-color: var(--contao);
}