body {
  background-color: chocolate;
}
.doodleview {
  display: flex;
  flex-flow: row;
}
.doodleview input {
  height: 1em;
}
.doodleview .setup {
  display: flex;
  flex-flow: column;
}
.flow {
  display: flex;
  flex-flow: column;
}
.flow .day {
  display: flex;
  flex-flow: column;
  width: 64px;
  color: white;
  background-color: black;
}
.flow .hour {
  position: relative;
  width: 64px;
  height: 64px;
  background-color: white;
  color: black;
}
.flow .hour.full {
  background-color: black;
  color: white;
}
.flow .hour.weight-1 {
  background-color: orange;
}
.flow .hour.weight-2 {
  background-color: red;
}
.flow .hour.weight-3 {
  background-color: green;
}
.flow .hour.weight-4 {
  background-color: blue;
}
.flow .hour.weight-6 {
  background-color: brown;
}
.flow .hour.weight-5 {
  background-color: grey;
}
.flow .hour .plage {
  position: absolute;
}
.flow .hour .canvas {
  position: absolute;
  width: inherit;
  height: inherit;
}