:root {
    --white: #ffffff;
    --blue: #a7bffe;
    --red: #f67474;
    --orange: #f4a875;
    --yellow: #fffa70;
    --green: #84fb6f;

}
/* pick random color ???? or by array key ?? */
.cell-0 {
    background-color: var(--blue)!important;
}
.cell-1 {
    background-color: var(--red)!important;
}
.cell-2 {
    background-color: var(--orange)!important;
}
.cell-3 {
    background-color: var(--yellow)!important;
}
.cell-4 {
    background-color: var(--green)!important;
}

/* scroll table */
.table-container {
  max-height: 300px;
  overflow-y: auto;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.calendar-table button {
    font-size: 10px;
}

.calendar-table thead th {
  position: sticky;
  top: 0; 
  z-index: 1;
}