@charset "ISO-8859-1"; 

.scheduleContainer {
  display: grid;
  grid-gap: 0.2rem;
  grid-template-columns: 5rem repeat(4, 1fr);
  grid-template-rows: repeat(28, 1fr);
  grid-template-areas: 
    "time0500 stage stage stage stage" "time0530 stage stage stage stage" 
    "time0600 stage stage stage stage" "time0630 stage stage stage stage" 
    "time0700 stage stage stage stage" "time0730 stage stage stage stage" 
    "time0800 stage stage stage stage" "time0830 stage stage stage stage" 
    "time0900 stage stage stage stage" "time0930 stage stage stage stage" 
    "time1000 stage stage stage stage" "time1030 stage stage stage stage" 
    "time1100 stage stage stage stage" "time1130 stage stage stage stage" 
    "time1200 stage stage stage stage" "time1230 stage stage stage stage" 
    "time1300 stage stage stage stage" "time1330 stage stage stage stage" 
    "time1400 stage stage stage stage" "time1430 stage stage stage stage" 
    "time1500 stage stage stage stage" "time1530 stage stage stage stage" 
    "time1600 stage stage stage stage" "time1630 stage stage stage stage" 
    "time1700 stage stage stage stage" "time1730 stage stage stage stage" 
    "time1800 stage stage stage stage" "time1830 stage stage stage stage" 
    "time1900 stage stage stage stage" "time1930 stage stage stage stage" 
    "time2000 stage stage stage stage" "time2030 stage stage stage stage" 
    "time2100 stage stage stage stage" "time2130 stage stage stage stage";
}
  
/**
  * Time
  */
.time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: thin dotted #ccc;
  height: 100%;
  padding: 0 0.5rem;
}
.time.start-0500 {
  grid-area: time0500;
}
.time.start-0530 {
  grid-area: time0530;
}
.time.start-0600 {
  grid-area: time0600;
}
.time.start-0630 {
  grid-area: time0630;
}
.time.start-0700 {
  grid-area: time0700;
}
.time.start-0730 {
  grid-area: time0730;
}
.time.start-0800 {
  grid-area: time0800;
}
.time.start-0830 {
  grid-area: time0830;
}
.time.start-0900 {
  grid-area: time0900;
}
.time.start-0930 {
  grid-area: time0930;
}
.time.start-1000 {
  grid-area: time1000;
}
.time.start-1030 {
  grid-area: time1030;
}
.time.start-1100 {
  grid-area: time1100;
}
.time.start-1130 {
  grid-area: time1130;
}
.time.start-1200 {
  grid-area: time1200;
}
.time.start-1230 {
  grid-area: time1230;
}
.time.start-1300 {
  grid-area: time1300;
}
.time.start-1330 {
  grid-area: time1330;
}
.time.start-1400 {
  grid-area: time1400;
}
.time.start-1430 {
  grid-area: time1430;
}
.time.start-1500 {
  grid-area: time1500;
}
.time.start-1530 {
  grid-area: time1530;
}
.time.start-1600 {
  grid-area: time1600;
}
.time.start-1630 {
  grid-area: time1630;
}
.time.start-1700 {
  grid-area: time1700;
}
.time.start-1730 {
  grid-area: time1730;
}
.time.start-1800 {
  grid-area: time1800;
}
.time.start-1830 {
  grid-area: time1830;
}
.time.start-1900 {
  grid-area: time1900;
}
.time.start-1930 {
  grid-area: time1930;
}
.time.start-2000 {
  grid-area: time2000;
}
.time.start-2030 {
  grid-area: time2030;
}
.time.start-2100 {
  grid-area: time2100;
}
.time.start-2130 {
  grid-area: time2130;
}
.time[class*="30"]:not(.start-1300) {
  font-size: 0.8rem;
  color: #ccc;
}

/**
  * Event
  */
.event {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0.5rem 1rem;
  background-color: orange;
  border-radius: 0.2rem;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.4;
}
.event span {
  display: block;
  width: 100%;
  font-size: 0.8em;
  font-weight: normal;
}
.event.start-0500 {
  grid-row-start: time0500;
}
.event.start-0530 {
  grid-row-start: time0530;
}
.event.start-0600 {
  grid-row-start: time0600;
}
.event.start-0630 {
  grid-row-start: time0630;
}
.event.start-0700 {
  grid-row-start: time0700;
}
.event.start-0730 {
  grid-row-start: time0730;
}
.event.start-0800 {
  grid-row-start: time0800;
}
.event.start-0830 {
  grid-row-start: time0830;
}
.event.start-0900 {
  grid-row-start: time0900;
}
.event.start-0930 {
  grid-row-start: time0930;
}
.event.start-1000 {
  grid-row-start: time1000;
}
.event.start-1030 {
  grid-row-start: time1030;
}
.event.start-1100 {
  grid-row-start: time1100;
}
.event.start-1130 {
  grid-row-start: time1130;
}
.event.start-1200 {
  grid-row-start: time1200;
}
.event.start-1230 {
  grid-row-start: time1230;
}
.event.start-1300 {
  grid-row-start: time1300;
}
.event.start-1330 {
  grid-row-start: time1330;
}
.event.start-1400 {
  grid-row-start: time1400;
}
.event.start-1430 {
  grid-row-start: time1430;
}
.event.start-1500 {
  grid-row-start: time1500;
}
.event.start-1530 {
  grid-row-start: time1530;
}
.event.start-1600 {
  grid-row-start: time1600;
}
.event.start-1630 {
  grid-row-start: time1630;
}
.event.start-1700 {
  grid-row-start: time1700;
}
.event.start-1730 {
  grid-row-start: time1730;
}
.event.start-1800 {
  grid-row-start: time1800;
}
.event.start-1830 {
  grid-row-start: time1830;
}
.event.start-1900 {
  grid-row-start: time1900;
}
.event.start-1930 {
  grid-row-start: time1930;
}
.event.start-2000 {
  grid-row-start: time2000;
}
.event.start-2030 {
  grid-row-start: time2030;
}
.event.start-2100 {
  grid-row-start: time2100;
}
.event.start-2130 {
  grid-row-start: time2130;
}
.event.end-0500 {
  grid-row-end: time0500;
}
.event.end-0530 {
  grid-row-end: time0530;
}
.event.end-0600 {
  grid-row-end: time0600;
}
.event.end-0630 {
  grid-row-end: time0630;
}
.event.end-0700 {
  grid-row-end: time0700;
}
.event.end-0730 {
  grid-row-end: time0730;
}

.event.end-0800 {
  grid-row-end: time0800;
}
.event.end-0830 {
  grid-row-end: time0830;
}
.event.end-0900 {
  grid-row-end: time0900;
}
.event.end-0930 {
  grid-row-end: time0930;
}
.event.end-1000 {
  grid-row-end: time1000;
}
.event.end-1030 {
  grid-row-end: time1030;
}
.event.end-1100 {
  grid-row-end: time1100;
}
.event.end-1130 {
  grid-row-end: time1130;
}
.event.end-1200 {
  grid-row-end: time1200;
}
.event.end-1230 {
  grid-row-end: time1230;
}
.event.end-1300 {
  grid-row-end: time1300;
}
.event.end-1330 {
  grid-row-end: time1330;
}
.event.end-1400 {
  grid-row-end: time1400;
}
.event.end-1430 {
  grid-row-end: time1430;
}
.event.end-1500 {
  grid-row-end: time1500;
}
.event.end-1530 {
  grid-row-end: time1530;
}
.event.end-1600 {
  grid-row-end: time1600;
}
.event.end-1630 {
  grid-row-end: time1630;
}
.event.end-1700 {
  grid-row-end: time1700;
}
.event.end-1730 {
  grid-row-end: time1730;
}
.event.end-1800 {
  grid-row-end: time1800;
}
.event.end-1830 {
  grid-row-end: time1830;
}
.event.end-1900 {
  grid-row-end: time1900;
}
.event.end-1930 {
  grid-row-end: time1930;
}
.event.end-2000 {
  grid-row-end: time2000;
}
.event.end-2030 {
  grid-row-end: time2030;
}
.event.end-2100 {
  grid-row-end: time2100;
}
.event.end-2130 {
  grid-row-end: time2130;
}
.event.length-1 {
  grid-column-end: span 1;
}
.event.length-2 {
  grid-column-end: span 2;
}
.event.length-3 {
  grid-column-end: span 3;
}
.event.length-4 {
  grid-column-end: span 4;
}
.event.stage-earth {
  background-color: #FFA726;
}
.event.stage-mercury {
  background-color: #9CCC65;
}
.event.stage-venus {
  background-color: #FF8A65;
}
.event.stage-mars {
  background-color: #B3E5FC;
}
.event.stage-jupiter {
  background-color: #81D4FA;
}
.event.stage-saturn {
  background-color: #26C6DA;
}