#content_course_open {
  border-top-left-radius: var(--border_radius);
  border-top-right-radius: var(--border_radius);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#content_course_open > .course_info {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
}
#content_course_open > .control .flexer {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
}
#content_course_open > .course_info h2 {
  font-size: var(--fsz_course_open);  
}

/* PROGRESS */
#content_course_open > .weekly_progress {}
#content_course_open > .weekly_progress ul.units {
  margin-top: 20px;
  display: none;
  justify-content: center;
  gap: 2px;
  height: 30px;
}
#content_course_open > .weekly_progress ul.units > li {
  width: 2px;
  background-color: var(--color_accent_1_overlay);
  /* border: 1px solid var(--color_accent_1); */
}
#content_course_open > .weekly_progress ul.units > li.status_complete {
  /* border-color: var(--color_accent_completed_general); */
  background-color: var(--color_accent_completed_general);
}

#content_course_open > .weekly_progress ul.weeks {
  display: none;
  height: 20px;
}
#content_course_open > .weekly_progress ul.weeks > li {
  flex-basis: 0;
  flex-grow: 1;
  border-left: .5px solid var(--color_accent_1);

  display: flex;
  justify-content: center;
  align-items: center;
}
#content_course_open > .weekly_progress ul.weeks > li:first-child {
  border: none;
}

#content_course_open > .weekly_progress .units_by_chapters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

#content_course_open > .weekly_progress .units_by_chapters .chapter {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  height: 50px;
  position: relative;
}

#content_course_open > .weekly_progress .units_by_chapters .chapter-counter {
  display: block;
  position: absolute;
  top: 0;
  color: var(--color_accent_1);
  opacity: 0;
  transition: opacity 300ms;
}

#content_course_open > .weekly_progress .units_by_chapters:hover .chapter-counter {
  opacity: 1;
}

#content_course_open > .weekly_progress .units_by_chapters .chapter-unit {
  width: 2px;
  height: 30px;
  background-color: var(--color_accent_1_overlay);
}

#content_course_open > .weekly_progress .units_by_chapters .chapter-unit.check_complete {
  background-color: var(--color_accent_completed_general);
}

#content_course_open > .weekly_progress .units_by_chapters .chapter-unit.check_question {
  background-color: var(--color_accent_question);
}