.schedule-container {
	max-width: 860px;
	margin: auto;
}

/* generic styles */
.schedule-header {
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid black;
}
.schedule-categ {
	text-align: left;
}

.schedule-event {
	padding: 10px;
	background-color: #F4FAFF;	/* #f8f8f8; */
	border-bottom: 1px solid black;
}

.schedule-event-author {
	color: gray;
	text-align: right;
}

.schedule-hours {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid black;
}


/* day13 */
.schedule-day13 {
	/* border: 1px solid magenta; */
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 60px 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"attent msg1   msg1   msg1  "
		"event1 event1 event1 event1"
}
.schedule-day13 .attent {
	grid-column: 1 / span 1 ;
	grid-row: 1 / span 1;
	background: #FFF0F0;
	color: red;
	font-size: 16px;
}
.schedule-day13 .msg1 {
	grid-column: 2 / span 3 ;
	grid-row: 1 / span 1;
	background: #FFF0F0;
	color: red;
	font-size: 16px;
}
.schedule-day13 .event1 {
	grid-column: 1 / span 4 ;
	grid-row: 2 / span 1;
	line-height: 32px;
	background: white;
	border-bottom: 0px;
}

/* day20 */
.schedule-day20 {
	/* border: 1px solid magenta; */
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 60px 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"attent msg1   msg1   msg1  "
		"dummy0 dummy0 dummy0 dummy0"
		"hour00 categ  categ  categ "
		"hour01 room1  room2  room3 "
		"hours1 dummy1 event1 event2"
		"hours2 event3 event4 event5"
		"hours3 event6 event7 event8";
}

.schedule-day20 .attent {
	grid-column: 1 / span 1 ;
	grid-row: 1 / span 1;
	background: #FFF0F0;
	color: red;
	font-size: 16px;
}
.schedule-day20 .msg1 {
	grid-column: 2 / span 3 ;
	grid-row: 1 / span 1;
	background: #FFF0F0;
	color: red;
	font-size: 16px;
}
.schedule-day20 .dummy0 {
	grid-column: 1 / span 4;
	grid-row: 2 / span 1;
	background: white;
}

/* category */
.schedule-day20 .categ {
	grid-area: categ;
	text-align: left;
}
/* rooms */
.schedule-day20 .room1 {
	grid-area: room1;
	background: #D1EDD5;
}
.schedule-day20 .room2 {
	grid-area: room2;
	background: #F4D7C3;
}
.schedule-day20 .room3 {
	grid-area: room3;
	background: #CDE4ED;
}

/* hours */
.schedule-day20 .hour00 {
	grid-column: 1 / span 1;
	grid-row: 3 / span 1;
}
.schedule-day20 .hour01 {
	grid-column: 1 / span 1;
	grid-row: 4 / span 1;
}

.schedule-day20 .hours1 {
	grid-area: hours1;
}
.schedule-day20 .hours2 {
	grid-area: hours2;
}
.schedule-day20 .hours3 {
	grid-area: hours3;
}

/* events */
.schedule-day20 .dummy1 {
	grid-area: dummy1;
	background: white;
}
.schedule-day20 .event1 {
	grid-area: event1;
}
.schedule-day20 .event2 {
	grid-area: event2;
}
.schedule-day20 .event3 {
	grid-area: event3;
}
.schedule-day20 .event4 {
	grid-area: event4;
}
.schedule-day20 .event5 {
	grid-area: event5;
}
.schedule-day20 .event6 {
	grid-area: event6;
}
.schedule-day20 .event7 {
	grid-area: event7;
}
.schedule-day20 .event8 {
	grid-area: event8;
}

/* day 21 */
.schedule-day21 {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"attent msg1   msg1   msg1    msg1   msg1"
		"dummy0 dummy0 dummy0 dummy0  dummy0 dummy0"
		"hours1  event1 event1 event1 event1 event1"
		"hours2  event2 event2 event2 event2 event2"
		".       categ1 categ1 categ1 categ1 categ1"
		".       room1  room2  room3  room4  room5 "
		"hours3  vs1    v21    v31    v41    v51   "
		"hours4  vs1    v22    v32    v42    v52   "
		"hours5  .      v22    v32    v42    v52   "
		"hours6  .      v23    v33    v43    v53   "
		".       categ2 categ2 categ2 categ2 categ2"
		"hours7  event3 event3 event3 event3 event3"
		".       categ3 categ3 categ3 categ3 categ3"
		".       room12 room22 room32 room42 room52"
		"hours8  ls2    l21    l31    l41    l51   "
		"hours9  ls2    l22    l32    l42    l52   "
		"hours10 ls2    l23    l33    l43    l53   "
		"hours11 .      l23    l33    l43    l53    "
		"hours12 dummy1 l24    l34    l44    l54   ";
}

.schedule-day21 .vs1-bottom {
	grid-column: vs1 / span 1;
	grid-row: vs1 / span 4;
	/* background: #FF00FF22; */
}

.schedule-day21 .hours11-bottom {
	grid-column: hours11-end /  -1;
	grid-row: hours11-start / span 1;
	/* background: #FF00FF22; */
}

.schedule-day21 .attent {
	grid-column: 1 / span 1 ;
	grid-row: 1 / span 1;
	background: #FFF0F0;
	color: red;
	font-size: 16px;
}
.schedule-day21 .msg1 {
	grid-column: 2 / span 5 ;
	grid-row: 1 / span 1;
	background: #FFF0F0;
	color: red;
	font-size: 16px;
}
.schedule-day21 .dummy0 {
	background: #E0E4CD; 
}


/* day 22 */
.schedule-day22 {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr 60px;
	grid-template-rows: auto;
	grid-template-areas:
		"attent  msg1   msg1   msg1   msg1   msg1   msg1  "
		"dummy0  dummy0 dummy0 dummy0 dummy0 dummy0 dummy0"
		"hours0  event1 event1 event1 event1 event2 event2"
		"hours1  ls3    l25    l35    l45    v54    hours2"
		"hours3  .      .      .      .      v55    hours2a"
		"hours5  .      l26    l36    l46    v56    hours4"
		".       .      .      .      .      v57    hours4a"
		"hours7  .      l27    l37    l47    dummy2 dummy3"
		"hours9  dummy1 .      .      .      .      ."
		".       lunch  lunch  lunch  lunch  lunch  lunch"
}

.schedule-day22 .attent {
	grid-column: 1 / span 1 ;
	grid-row: 1 / span 1;
	background: #FFF0F0;
	color: red;
	font-size: 16px;
}
.schedule-day22 .msg1 {
	grid-column: 2 / span 6 ;
	grid-row: 1 / span 1;
	background: #FFF0F0;
	color: red;
	font-size: 16px;
}
.schedule-day22 .dummy0 {
	grid-column: 1 / span 7;
	grid-row: 2 / span 1;
	background: white;
}

.schedule-day22 .hours0 {
	grid-column: 1 / span 1 ;
	grid-row: 3 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .event1 {
	grid-column: 2 / span 4 ;
	grid-row: 3 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .event2 {
	grid-column: 6 / span 2 ;
	grid-row: 3 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .ls3 {
	grid-column: 2 / span 1 ;
	grid-row: 4 / span 7;
	/* background: #FF00FF22; */
}

.schedule-day22 .l25 {
	grid-column: 3 / span 1 ;
	grid-row: 4 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .l35 {
	grid-column: 4 / span 1 ;
	grid-row: 4 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .l45 {
	grid-column: 5 / span 1 ;
	grid-row: 4 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .v54 {
	grid-column: 6 / span 1 ;
	grid-row: 4 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .v55 {
	grid-column: 6 / span 1 ;
	grid-row: 5 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .hours1 {
	grid-column: 1 / span 1 ;
	grid-row: 4 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .hours2 {
	grid-column: 7 / span 1 ;
	grid-row: 4 / span 1;
	/* background: #FF00FF22; */
}
.schedule-day22 .hours2a {
	grid-column: 7 / span 1 ;
	grid-row: 5 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .hours3 {
	grid-column: 1 / span 1 ;
	grid-row: 5 / span 1;
	/* background: #FF00FF22; */
}


.schedule-day22 .l26 {
	grid-column: 3 / span 1 ;
	grid-row: 6 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .l36 {
	grid-column: 4 / span 1 ;
	grid-row: 6 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .l46 {
	grid-column: 5 / span 1 ;
	grid-row: 6 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .v56 {
	grid-column: 6 / span 1 ;
	grid-row: 6 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .v57 {
	grid-column: 6 / span 1 ;
	grid-row: 7 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .hours5 {
	grid-column: 1 / span 1 ;
	grid-row: 6 / span 2;
	/* background: #FF00FF22; */
}

.schedule-day22 .hours7 {
	grid-column: 1 / span 1 ;
	grid-row: 8 / span 3;
	/* background: #FF00FF22; */
}

.schedule-day22 .hours4 {
	grid-column: 7 / span 1 ;
	grid-row: 6 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .hours4a {
	grid-column: 7 / span 1 ;
	grid-row: 7 / span 2;
	/* background: #FF00FF22; */
}
.schedule-day22 .l27 {
	grid-column: 3 / span 1 ;
	grid-row: 8 / span 4;
	/* background: #FF00FF22; */
}

.schedule-day22 .l37 {
	grid-column: 4 / span 1 ;
	grid-row: 8 / span 4;
	/* background: #FF00FF22; */
}

.schedule-day22 .l47 {
	grid-column: 5 / span 1 ;
	grid-row: 8 / span 4;
	/* background: #FF00FF22; */
}

.schedule-day22 .hours9 {
	grid-column: 1 / span 1 ;
	grid-row: 11 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .lunch {
	grid-column: 2 / span 7 ;
	grid-row: 12 / span 1;
	background: #E0E4CD; 
}

.schedule-day22 .hours11 {
	grid-column: 1 / span 1 ;
	grid-row: 12 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22 .dummy1 {
	grid-column: 2 / span 1 ;
	grid-row: 11 / span 1;
	background: white;
}

.schedule-day22 .dummy2 {
	grid-column: 6 / span 1 ;
	grid-row: 10 / span 2;
	background: white;
}
.schedule-day22 .dummy3 {
	grid-column: 7 / span 1 ;
	grid-row: 10 / span 2;
	background: white;
}


/* day 22 pm time */
.schedule-day22pm {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"dummy4  event6 event3 event3 event3 event3"
		"hours3  ls4    v24    v34    v44    v58   "
		"hours4  .      v25    v35    v45    v59   "
		"hours5  .      v26    v36    v46    v510  "
		"hours6  .      v27    v37    v47    v511  "
		"dummy5  dummy5 dummy5 dummy5 dummy5 dummy5"
		"hours7  event4 event4 event4 event4 event4"
		"hours8  event5 event5 event5 event5 event5"
}

.schedule-day22pm .dummy4 {
	grid-column: 1 / span 1 ;
	grid-row: 1 / span 1;
	background: white;
}

.schedule-day22pm .event6 {
	grid-column: 2 / span 1 ;
	grid-row: 1 / span 1;
	background: #F4D7C3;
}

.schedule-day22pm .event3 {
	grid-column: 3 / span 4 ;
	grid-row: 1 / span 1;
	 background: #D1EDD5;
}

.schedule-day22pm .hours3 {
	grid-column: 1 / span 1 ;
	grid-row: 2 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .hours4 {
	grid-column: 1 / span 1 ;
	grid-row: 3 / span 1;
	/* background: #FF00FF22; */
}


.schedule-day22pm .hours5 {
	grid-column: 1 / span 1 ;
	grid-row: 4 / span 1;
	/* background: #FF00FF22; */
}


.schedule-day22pm .hours6 {
	grid-column: 1 / span 1 ;
	grid-row: 5 / span 1;
	/* background: #FF00FF22; */
}


.schedule-day22pm .ls4 {
	grid-column: 2 / span 1 ;
	grid-row: 2 / span 4;
	/* background: #FF00FF22; */
}


.schedule-day22pm .v24 {
	grid-column: 3 / span 1 ;
	grid-row: 2 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v34 {
	grid-column: 4 / span 1 ;
	grid-row: 2 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v44 {
	grid-column: 5 / span 1 ;
	grid-row: 2 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v58 {
	grid-column: 6 / span 1 ;
	grid-row: 2 / span 1;
	/* background: #FF00FF22; */
}


.schedule-day22pm .v25 {
	grid-column: 3 / span 1 ;
	grid-row: 3 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v35 {
	grid-column: 4 / span 1 ;
	grid-row: 3 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v45 {
	grid-column: 5 / span 1 ;
	grid-row: 3 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v59 {
	grid-column: 6 / span 1 ;
	grid-row: 3 / span 1;
	/* background: #FF00FF22; */
}


.schedule-day22pm .v26 {
	grid-column: 3 / span 1 ;
	grid-row: 4 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v36 {
	grid-column: 4 / span 1 ;
	grid-row: 4 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v46 {
	grid-column: 5 / span 1 ;
	grid-row: 4 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v510 {
	grid-column: 6 / span 1 ;
	grid-row: 4 / span 1;
	/* background: #FF00FF22; */
}


.schedule-day22pm .v27 {
	grid-column: 3 / span 1 ;
	grid-row: 5 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v37 {
	grid-column: 4 / span 1 ;
	grid-row: 5 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v47 {
	grid-column: 5 / span 1 ;
	grid-row: 5 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .v511 {
	grid-column: 6 / span 1 ;
	grid-row: 5 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .dummy5 {
	grid-column: 1 / span 6 ;
	grid-row: 6 / span 1;
	background: white;
}


.schedule-day22pm .hours7 {
	grid-column: 1 / span 1 ;
	grid-row: 7 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .event4{
	grid-column: 2 / span 5 ;
	grid-row: 7 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .hours8 {
	grid-column: 1 / span 1 ;
	grid-row: 8 / span 1;
	/* background: #FF00FF22; */
}

.schedule-day22pm .event5{
	grid-column: 2 / span 5 ;
	grid-row: 8 / span 1;
	/* background: #FF00FF22; */
}