/*********************************************************************************
/*
/* course-schedule
/*
/********************************************************************************/

.course-schedule {
  padding: 8px;
  margin: 30px auto;
  max-width: 860px;
}

.course-schedule .day {
  display: flex;
  margin-bottom: 5px;
}

.course-schedule .day .day-number {
  flex: 0 0 60px;
  background-color: var(--course-schedule-day);
  color: var(--header-text);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 5px;
}

.course-schedule .day .day-schedule {
  flex: 1 1 calc(100% - 60px);  
}

.course-schedule .day .day-schedule .period {
  display: flex;
  margin: 0px 0px 0px 4px;
  padding: 2px 2px 2px 4px;
  background-color: var(--course-schedule-period);
}

.course-schedule .day .day-schedule .period:not(:last-child) { 
  margin-bottom: 3px;
}

.course-schedule .day .day-schedule .period .morning,
.course-schedule .day .day-schedule .period .afternoon {
  flex: 1 1 75px;
  padding: 6px 0;
}

.course-schedule .day .day-schedule .period .activity {
  flex: 1 1 calc(100% - 75px);
  padding: 6px 0;
}