.course-subnav-title-suffix {
  font-weight: 400;
}

.course-subnav-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  position: relative;
  overflow: visible;
}

.course-subnav-section-icon-mark {
  display: block;
  background-color: var(--white);
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.course-subnav-section-icon-mark--planner {
  width: 0.9rem;
  height: 0.9rem;
  transform: translateY(-0.06rem);
  -webkit-mask-image: url('/app/courses/courseplanner.png');
  mask-image: url('/app/courses/courseplanner.png');
}

.course-subnav-section-icon-mark--inclass {
  width: 0.85rem;
  height: 0.85rem;
  -webkit-mask-image: url('/app/courses/inclasslessons.png');
  mask-image: url('/app/courses/inclasslessons.png');
}

.course-subnav-section-icon-mark--worksheet {
  width: 0.8rem;
  height: 0.8rem;
  -webkit-mask-image: url('/app/courses/worksheet.png');
  mask-image: url('/app/courses/worksheet.png');
}

.course-subnav-section-icon-mark--student {
  width: 0.85rem;
  height: 0.85rem;
  -webkit-mask-image: url('/app/courses/studentlessons.png');
  mask-image: url('/app/courses/studentlessons.png');
}

.course-subnav-section-icon-mark--portfolio {
  width: 0.85rem;
  height: 0.85rem;
  -webkit-mask-image: url('/app/courses/portfolio.png');
  mask-image: url('/app/courses/portfolio.png');
}

.course-subnav-section-icon-mark--progress {
  width: 0.85rem;
  height: 0.85rem;
  -webkit-mask-image: url('/app/courses/progress.png');
  mask-image: url('/app/courses/progress.png');
}

.course-subnav-section-icon--planner {
  background: var(--planner-orange-light);
}

.course-subnav-section-icon--icl {
  background: var(--icl-green-light);
}

.course-subnav-section-icon--worksheets {
  background: var(--section-color-light, #38a0b8);
}

.course-subnav-section-icon--student-lessons {
  background: var(--section-color-light, #6fa0c9);
}

.course-subnav-section-icon--vocabulary {
  background: var(--section-color-light, #4d6f9a);
}

.course-subnav-section-icon--portfolio {
  background: var(--section-color-light, #a085c4);
}

.course-subnav-section-icon--progress {
  background: var(--section-color-light, #9a4a8f);
}