.courseSection {
  display: flex;
  flex-flow: row nowrap;
}
.courseSection.mobile .textArea {
  position: static;
}
.courseSection.mobile .textArea .rightSection {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  margin-left: 6px;
}
.courseSection.mobile .textArea .rightSection .resetButton {
  display: flex;
}
.courseSection:first-child .iconWrapper .topLine {
  background-color: rgba(0, 0, 0, 0);
}
.courseSection:last-child .iconWrapper .bottomLine {
  background-color: rgba(0, 0, 0, 0);
}
.courseSection.selected .textArea {
  border-radius: var(--border-radius-rounded-md, 8px);
  background: #e5e5e5;
}
.courseSection.selected .textArea .courseTitle {
  display: block;
  overflow: hidden;
  color: #0a0a0a;
  font-size: var(--text-sm-font-size, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  white-space: normal;
}
.courseSection.available:hover {
  cursor: pointer;
}
.courseSection.available:hover .textArea .resetButton {
  display: flex;
}
.courseSection.unavailable .textArea .courseTitle {
  color: var(--color-9);
}
.courseSection .iconWrapper {
  width: 16px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  flex: 0 0 auto;
}
.courseSection .iconWrapper.small .icon {
  width: 4px;
}
.courseSection .iconWrapper .topLine {
  width: 1px;
  background-color: var(--color-9);
  flex: 1 1 auto;
}
.courseSection .iconWrapper .icon {
  padding: 5px 0;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.courseSection .iconWrapper .icon .smallIcon {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-9);
}
.courseSection .iconWrapper .icon .bigIcon {
  width: 12px;
  height: 12px;
}
.courseSection .iconWrapper .bottomLine {
  flex: 1 1 auto;
  width: 1px;
  background-color: var(--color-9);
}
.courseSection .textArea {
  margin-left: 4px;
  padding: 8px 8px;
  border-radius: 8px;
  flex: 1 0 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.courseSection .textArea .leftSection {
  flex: 1 1 0;
  display: flex;
  align-items: center;
}
.courseSection .textArea .leftSection.notPaid .courseTitle {
  color: rgba(10, 10, 10, 0.45);
}
.courseSection .textArea .leftSection .courseTitle {
  display: inline-block;
  overflow: hidden;
  color: var(--base-sidebar-foreground, #0a0a0a);
  font-size: var(--text-sm-font-size, 14px);
  font-style: normal;
  font-weight: var(--font-weight-normal, 400);
  line-height: 20px;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  white-space: normal;
}
.courseSection .textArea .rightSection {
  flex: 0 0 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.courseSection .textArea .rightSection .resetButton {
  margin: 0;
  display: flex;
  pointer-events: auto;
}
.courseSection:not(.mobile).available:hover,
.courseSection:not(.mobile).available:focus-within {
  cursor: pointer;
}
.courseSection:not(.mobile).available:hover .textArea .rightSection,
.courseSection:not(.mobile).available:focus-within .textArea .rightSection {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-4px, -50%);
}
