.this-lesson-titles {
  position: sticky;
  top: 80px;
  width: 250px;
  display: flex;
  flex-direction: column;
  /* max-width: 180px; */
}

.this-lesson-titles-title-scroll{
  max-height: 75vh;
  overflow: auto;
  padding-left: 8px;
}

.this-lesson-titles-header {
  display: flex;
  align-items: center;
  border: 1px solid rgba(62, 62, 62, 0.749);
  border-bottom: 0;
  font-family: "iransans";
  padding: 5px;
  border-radius: 20px 20px 0 0;
  background-color: var(--this-lesson-title-header-bg);
  max-height: fit-content;
  min-height: 30px;
}

.this-lesson-titles-body {
  border: 1px solid rgba(62, 62, 62, 0.749);
  line-height: 1.5;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-family: "iransans";
  font-size: small;
  background-color: var(--this-lesson-title-bosy-bg);
  padding-right: 8px;
}

.this-lesson-titles-title{
  margin-bottom: 8px;
}

.lesson-title-01:hover {
  color: #ff4fd8;
  cursor: pointer;
}
.lesson-title-02:hover {
  color: #9a5bff;
  cursor: pointer;
}
.lesson-title-03:hover {
  color: #4cff89;
  cursor: pointer;
}
.lesson-title-04:hover {
  color: #3BA3FF;
  cursor: pointer;
}
.lesson-title-05:hover {
  color: #FFD84A;
  cursor: pointer;
}
.lesson-title-06:hover {
  color: #00F5D4;
  cursor: pointer;
}
.lesson-title-07:hover {
  color: #B388EB;
  cursor: pointer;
}
.lesson-title-08:hover {
  color: #C8FF7A;
  cursor: pointer;
}
.lesson-title-09:hover {
  color: #9BF6FF;
  cursor: pointer;
}
.lesson-title-10:hover {
  color: #ff4fd8;
  cursor: pointer;
}
.lesson-title-11:hover {
  color: #9a5bff;
  cursor: pointer;
}
.lesson-title-12:hover {
  color: #4cff89;
  cursor: pointer;
}
.lesson-title-13:hover {
  color: #ff4fd8;
  cursor: pointer;
}
.lesson-title-14:hover {
  color: #9a5bff;
  cursor: pointer;
}
.lesson-title-15:hover {
  color: #4cff89;
  cursor: pointer;
}
.lesson-title-16:hover {
  color: #3BA3FF;
  cursor: pointer;
}
.lesson-title-17:hover {
  color: #FFD84A;
  cursor: pointer;
}
.lesson-title-18:hover {
  color: #00F5D4;
  cursor: pointer;
}
.lesson-title-19:hover {
  color: #B388EB;
  cursor: pointer;
}
.lesson-title-20:hover {
  color: #C8FF7A;
  cursor: pointer;
}
.lesson-title-21:hover {
  color: #9BF6FF;
  cursor: pointer;
}
.lesson-title-22:hover {
  color: #ff4fd8;
  cursor: pointer;
}
.lesson-title-23:hover {
  color: #9a5bff;
  cursor: pointer;
}
.lesson-title-24:hover {
  color: #4cff89;
  cursor: pointer;
}
.lesson-title-25:hover {
  color: #B388EB;
  cursor: pointer;
}
.lesson-title-26:hover {
  color: #C8FF7A;
  cursor: pointer;
}
.lesson-title-27:hover {
  color: #9BF6FF;
  cursor: pointer;
}
.lesson-title-28:hover {
  color: #ff4fd8;
  cursor: pointer;
}
.lesson-title-29:hover {
  color: #9a5bff;
  cursor: pointer;
}
.lesson-title-30:hover {
  color: #4cff89;
  cursor: pointer;
}



.lesson-title-01::before {
  content: "-  ";
}
.lesson-title-02::before {
  content: "-  ";
}
.lesson-title-03::before {
  content: "-  ";
}
.lesson-title-04::before {
  content: "-  ";
}
.lesson-title-05::before {
  content: "-  ";
}
.lesson-title-06::before {
  content: "-  ";
}
.lesson-title-07::before {
  content: "-  ";
}
.lesson-title-08::before {
  content: "-  ";
}
.lesson-title-09::before {
  content: "-  ";
}
.lesson-title-10::before {
  content: "-  ";
}
.lesson-title-11::before {
  content: "-  ";
}
.lesson-title-12::before {
  content: "-  ";
}
.lesson-title-13::before {
  content: "-  ";
}
.lesson-title-14::before {
  content: "-  ";
}
.lesson-title-15::before {
  content: "-  ";
}
.lesson-title-16::before {
  content: "-  ";
}
.lesson-title-17::before {
  content: "-  ";
}
.lesson-title-18::before {
  content: "-  ";
}
.lesson-title-19::before {
  content: "-  ";
}
.lesson-title-20::before {
  content: "-  ";
}
.lesson-title-21::before {
  content: "-  ";
}
.lesson-title-22::before {
  content: "-  ";
}
.lesson-title-23::before {
  content: "-  ";
}
.lesson-title-24::before {
  content: "-  ";
}
.lesson-title-25::before {
  content: "-  ";
}
.lesson-title-26::before {
  content: "-  ";
}
.lesson-title-27::before {
  content: "-  ";
}
.lesson-title-28::before {
  content: "-  ";
}
.lesson-title-29::before {
  content: "-  ";
}
.lesson-title-30::before {
  content: "-  ";
}


.this-lesson-titles:has(.lesson-title-01:hover) .this-lesson-titles-body {
  border-color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-02:hover) .this-lesson-titles-body {
  border-color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-03:hover) .this-lesson-titles-body {
  border-color: #4cff89;
}
.this-lesson-titles:has(.lesson-title-04:hover) .this-lesson-titles-body {
  border-color: #3BA3FF;
}
.this-lesson-titles:has(.lesson-title-05:hover) .this-lesson-titles-body {
  border-color: #FFD84A;
}
.this-lesson-titles:has(.lesson-title-06:hover) .this-lesson-titles-body {
  border-color: #00F5D4;
}
.this-lesson-titles:has(.lesson-title-07:hover) .this-lesson-titles-body {
  border-color: #B388EB;
}
.this-lesson-titles:has(.lesson-title-08:hover) .this-lesson-titles-body {
  border-color: #C8FF7A;
}
.this-lesson-titles:has(.lesson-title-09:hover) .this-lesson-titles-body {
  border-color: #9BF6FF;
}
.this-lesson-titles:has(.lesson-title-10:hover) .this-lesson-titles-body {
  border-color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-11:hover) .this-lesson-titles-body {
  border-color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-12:hover) .this-lesson-titles-body {
  border-color: #4cff89;
}
.this-lesson-titles:has(.lesson-title-13:hover) .this-lesson-titles-body {
  border-color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-14:hover) .this-lesson-titles-body {
  border-color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-15:hover) .this-lesson-titles-body {
  border-color: #4cff89;
}
.this-lesson-titles:has(.lesson-title-16:hover) .this-lesson-titles-body {
  border-color: #3BA3FF;
}
.this-lesson-titles:has(.lesson-title-17:hover) .this-lesson-titles-body {
  border-color: #FFD84A;
}
.this-lesson-titles:has(.lesson-title-18:hover) .this-lesson-titles-body {
  border-color: #00F5D4;
}
.this-lesson-titles:has(.lesson-title-19:hover) .this-lesson-titles-body {
  border-color: #B388EB;
}
.this-lesson-titles:has(.lesson-title-20:hover) .this-lesson-titles-body {
  border-color: #C8FF7A;
}
.this-lesson-titles:has(.lesson-title-21:hover) .this-lesson-titles-body {
  border-color: #9BF6FF;
}
.this-lesson-titles:has(.lesson-title-22:hover) .this-lesson-titles-body {
  border-color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-23:hover) .this-lesson-titles-body {
  border-color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-24:hover) .this-lesson-titles-body {
  border-color: #4cff89;
}
.this-lesson-titles:has(.lesson-title-25:hover) .this-lesson-titles-body {
  border-color: #B388EB;
}
.this-lesson-titles:has(.lesson-title-26:hover) .this-lesson-titles-body {
  border-color: #C8FF7A;
}
.this-lesson-titles:has(.lesson-title-27:hover) .this-lesson-titles-body {
  border-color: #9BF6FF;
}
.this-lesson-titles:has(.lesson-title-28:hover) .this-lesson-titles-body {
  border-color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-29:hover) .this-lesson-titles-body {
  border-color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-30:hover) .this-lesson-titles-body {
  border-color: #4cff89;
}


.this-lesson-titles:has(.lesson-title-01:hover) .this-lesson-titles-header {
  border-color: #ff4fd8;
  color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-02:hover) .this-lesson-titles-header {
  border-color: #9a5bff;
  color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-03:hover) .this-lesson-titles-header {
  border-color: #4cff89;
  color: #4cff89;
}
.this-lesson-titles:has(.lesson-title-04:hover) .this-lesson-titles-header {
  border-color: #3BA3FF;
  color: #3BA3FF;
}
.this-lesson-titles:has(.lesson-title-05:hover) .this-lesson-titles-header {
  border-color: #FFD84A;
  color: #FFD84A;
}
.this-lesson-titles:has(.lesson-title-06:hover) .this-lesson-titles-header {
  border-color: #00F5D4;
  color: #00F5D4;
}
.this-lesson-titles:has(.lesson-title-07:hover) .this-lesson-titles-header {
  border-color: #B388EB;
  color: #B388EB;
}
.this-lesson-titles:has(.lesson-title-08:hover) .this-lesson-titles-header {
  border-color: #C8FF7A;
  color: #C8FF7A;
}
.this-lesson-titles:has(.lesson-title-09:hover) .this-lesson-titles-header {
  border-color: #9BF6FF;
  color: #9BF6FF;
}
.this-lesson-titles:has(.lesson-title-10:hover) .this-lesson-titles-header {
  border-color: #ff4fd8;
  color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-11:hover) .this-lesson-titles-header {
  border-color: #9a5bff;
  color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-12:hover) .this-lesson-titles-header {
  border-color: #4cff89;
  color: #4cff89;
}
.this-lesson-titles:has(.lesson-title-13:hover) .this-lesson-titles-header {
  border-color: #ff4fd8;
  color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-14:hover) .this-lesson-titles-header {
  border-color: #9a5bff;
  color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-15:hover) .this-lesson-titles-header {
  border-color: #4cff89;
  color: #4cff89;
}
.this-lesson-titles:has(.lesson-title-16:hover) .this-lesson-titles-header {
  border-color: #3BA3FF;
  color: #3BA3FF;
}
.this-lesson-titles:has(.lesson-title-17:hover) .this-lesson-titles-header {
  border-color: #FFD84A;
  color: #FFD84A;
}
.this-lesson-titles:has(.lesson-title-18:hover) .this-lesson-titles-header {
  border-color: #00F5D4;
  color: #00F5D4;
}
.this-lesson-titles:has(.lesson-title-19:hover) .this-lesson-titles-header {
  border-color: #B388EB;
  color: #B388EB;
}
.this-lesson-titles:has(.lesson-title-20:hover) .this-lesson-titles-header {
  border-color: #C8FF7A;
  color: #C8FF7A;
}
.this-lesson-titles:has(.lesson-title-21:hover) .this-lesson-titles-header {
  border-color: #9BF6FF;
  color: #9BF6FF;
}
.this-lesson-titles:has(.lesson-title-22:hover) .this-lesson-titles-header {
  border-color: #ff4fd8;
  color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-23:hover) .this-lesson-titles-header {
  border-color: #9a5bff;
  color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-24:hover) .this-lesson-titles-header {
  border-color: #4cff89;
  color: #4cff89;
}
.this-lesson-titles:has(.lesson-title-25:hover) .this-lesson-titles-header {
  border-color: #B388EB;
  color: #B388EB;
}
.this-lesson-titles:has(.lesson-title-26:hover) .this-lesson-titles-header {
  border-color: #C8FF7A;
  color: #C8FF7A;
}
.this-lesson-titles:has(.lesson-title-27:hover) .this-lesson-titles-header {
  border-color: #9BF6FF;
  color: #9BF6FF;
}
.this-lesson-titles:has(.lesson-title-28:hover) .this-lesson-titles-header {
  border-color: #ff4fd8;
  color: #ff4fd8;
}
.this-lesson-titles:has(.lesson-title-29:hover) .this-lesson-titles-header {
  border-color: #9a5bff;
  color: #9a5bff;
}
.this-lesson-titles:has(.lesson-title-30:hover) .this-lesson-titles-header {
  border-color: #4cff89;
  color: #4cff89;
}






/*color: #3BA3FF;
  color: #FFD84A;
  color: #00F5D4;
  color: #FF7A59;
  color: #7B2CFF;
  color: #B4F000;
  color: #FF5C8A;
  color: #38BDF8;
  color: #F6C945;
  color: #C77DFF;
  color: #FFB3C1;
  color: #80FFDB;
  color: #FF9E00;
  color: #6EEB83;
  color: #9D4EDD;
  color: #F72585;
  color: #4CC9F0;
  color: #FFCBF2;
  color: #BDE0FE;
  color: #C8FF7A;
  color: #FF8FA3;
  color: #72EFDD;
  color: #9BF6FF;
  color: #FAA307;
  color: #B388EB;*/

@media (max-width: 768px){
    .max-1024{
        display: none;
    }
    .hashore-right{
      display: none;
    }
}