:root {
  --numDays: 5;
  --numHours: 10;
  --timeHeight: 70px;
  --calBgColor: #f6f6f6;
  --eventBorderColor: #cdcdcd;
  --eventColor1: #e9c9c6;
  --eventColor2: #fafaa2;
  --eventColor3: #bde5f1;
  --eventColor4: #b4f3d2;
  --eventColor5: #ffe2b3;
  --eventColor6: #f8c3f0;
  --eventColor7: #ff9d90;
  --eventColor8: #ecb1f9;
  --eventColor9: #a9cfa9;
  --eventColor10: #8dd1e7;
  --eventColor11: #e2e2d3;
  --eventColor12: #4ac0fb;
}

.calendar {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  margin: 2rem;
}

.timeline {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
}

.time {
  font-size: 0.8em;
}

.days {
  display: grid;
  grid-column: 2;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.events {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
  border-radius: 5px;
  background: var(--calBgColor);
}

/* Place on Timeline */
.start-1 {
  grid-row-start: 1;
}

.start-2 {
  grid-row-start: 2;
}

.start-3 {
  grid-row-start: 3;
}

.start-4 {
  grid-row-start: 4;
}

.start-5 {
  grid-row-start: 5;
}

.start-6 {
  grid-row-start: 6;
}

.start-7 {
  grid-row-start: 7;
}

.start-8 {
  grid-row-start: 8;
}

.start-9 {
  grid-row-start: 9;
}

.start-10 {
  grid-row-start: 10;
}

.start-11 {
  grid-row-start: 11;
}

.start-12 {
  grid-row-start: 12;
}

.start-13 {
  grid-row-start: 13;
}

.start-14 {
  grid-row-start: 14;
}

.end-2 {
  grid-row-end: 2;
}

.end-3 {
  grid-row-end: 3;
}

.end-4 {
  grid-row-end: 4;
}

.end-5 {
  grid-row-end: 5;
}

.end-6 {
  grid-row-end: 6;
}

.end-7 {
  grid-row-end: 7;
}

.end-8 {
  grid-row-end: 8;
}

.end-9 {
  grid-row-end: 9;
}

.end-10 {
  grid-row-end: 10;
}

.end-11 {
  grid-row-end: 11;
}


.end-12 {
  grid-row-end: 12;
}

.end-13 {
  grid-row-end: 13;
}

.end-14 {
  grid-row-end: 14;
}

.end-15 {
  grid-row-end: 15;
}


/* Event */

.title {
  font-weight: 60;
  margin-bottom: 0.25rem;
}

.event {
  border: 1px solid var(--eventBorderColor);
  border-radius: 5px;
  padding: 1px;
  margin: 0 1px;
  background: white;
}

.space,
.date {
  height: 60px
}

/* Global / Etc */

body {
  font-family: system-ui, sans-serif;
}

.impressao-3d {
  background: var(--eventColor1);
}

.ceramica {
  background: var(--eventColor2);
}

.laser {
  background: var(--eventColor3);
}

.cnc {
  background: var(--eventColor4);
}

.robotica {
  background: var(--eventColor5);
}

.multimedia {
  background: var(--eventColor6);
}

.apoio {
  background: var(--eventColor7);
}

.scanner-3d {
  background: var(--eventColor8);
}

.formacao {
  background: var(--eventColor9);
}

.visita {
  background: var(--eventColor10);
}

.outros {
  background: var(--eventColor11);
}

.plotter {
  background: var(--eventColor12);
}

.date {
  /* display: flex; */
  gap: 1em;
}

.date-num {
  font-size: 1.5rem;
  font-weight: 600;
  display: inline;
}

.date-day {
  display: inline;
  font-size: 1.5rem;
  font-weight: 100;
}

.time-marker {
  margin-top: 0;
  padding-top: 0;
}