.course-thumbnail{
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  border-radius: 6px;
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  a{
    position: absolute;
    top: 50%;
    left: 50%;
    transition: .3s all ease;
    transform: translate(-50%, -50%);
    svg {
      width: 65px;
      height: 65px;
    }
    &:hover{
      transform: translate(-50%, -50%) scale(1.1);
    }
  }
  &::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #13171f;
    opacity: .4;
  }
}

.course-description{
  h1{
    font-size: 16px;
    font-weight: 700;
    color: var(--#{$variable-prefix}eerie-black);
  }
  p{
    color: var(--#{$variable-prefix}light-text-color);
  }
  .progress-chapter{
    p{
      font-size: 10px;
      font-weight: 600;
      color: var(--#{$variable-prefix}light-text-color);
    }
    .progress{
      display: flex;
      .progress-bar{
        background-color: #72a6fd;
      }
    }
  }
}

.icon-teacher-expiry{
  font-weight: 600;
  svg{
    color: #a4a7ad;
  }
  p{
    color: #a4a7ad;
  }
  a{
    color: var(--#{$variable-prefix}toolbox-blue);
  }
}

.tab-course-contents{
  background: var(--#{$variable-prefix}light-gray-background);
  border-radius: 6px;
  .course-short-info{
    color: var(--#{$variable-prefix}light-text-color);
  }
  .accordion .accordion-button:not(.collapsed){
    background: var(--#{$variable-prefix}accordion-body-bg);
    border: var(--#{$variable-prefix}accordion-body-bg);
    box-shadow: none;
  }
}

/* stylelint-disable */
.course-icon-title{
  span{
    display: flex;
    width: 12px;
    height: 12px;
    svg{
      circle{
        fill: var(--#{$variable-prefix}--#{$variable-prefix}eerie-black);
      }
      path{
        fill: var(--#{$variable-prefix}primary-btn-text-color);
      }
    }
  }
  p{
    color: var(--#{$variable-prefix}eerie-black);
  }
}

.course-list{
  span{
    color: var(--#{$variable-prefix}eerie-black);
  }
}

.courses-time-dropdown{
  position: absolute;
  top: 0;
  right: 0;
  @media (max-width: 769px) {
    width: 100%;
    margin: 50px 0 0;
  }
  .form-floating {
    &> .form-control{
      padding-left: .875rem;
      padding-right: .875rem;
    }
  }
}

.courses-categories{
  @media (max-width: 769px) {
    .tab-content{
      margin-top: 50px;
    }
  }
}
/* stylelint-enable */

.screen-match-height{
  min-height: calc(100vh - 210px);
}

.auto-scroll{
  .card-body > .row{
    max-height: calc(100vh - 275px);
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}