#content_course_list {
  /* margin-top: 20px; */
  position: relative;
  z-index: var(--z_index_course_list);
  padding: 5px;
  padding-bottom: 5px;

  display: flex;
  flex-direction: column;
  gap: 5px;
}
#content_course_list .expand_course_selector {
  width: 15vw;
}
#content_course_list.expanded .expand_course_selector {
  background-color: var(--color_accent_completed_general);
  color: var(--color_accent_1);
}

#content_course_list > ul {
  position: absolute;
  left: 0;
  top: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  width: 100%;
  
  background-color: var(--color_accent_completed_general);

  gap: 0;
  padding: 0;

  transition: gap, padding var(--t_fast_transition);
}
#content_course_list.expanded > ul {

  border-top: 1px solid var(--color_accent_1);
  border-bottom: 1px solid var(--color_accent_1);

  padding: 5px;
  gap: 5px;

}
#content_course_list > ul > * {
  font-size: 0;
  padding: 0;
  padding-left: 5px;
  transition: font-size  var(--t_fast_transition), padding var(--t_fast_transition);
}
#content_course_list.expanded > ul > * {
  font-size: calc(1 * var(--fsz_course_list));
  padding-top: 4px;
  padding-bottom: 4px;
}