:root {
  --presenter-courses-gap: 30px;
  --presenter-course-item-border-color: var(--brand-blue-main-30);
  --presenter-course-item-border-radius: 0.75rem;
  --presenter-courses-list-gap: 1.25rem;

  @media (max-width: 991px) {
    --presenter-courses-gap: 1rem;
    --presenter-course-item-border-radius: 1rem;
  }
}

.presenter-courses-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: var(--presenter-courses-gap);
}

.search-input-wrapper {
  --icon-search-color: #aaa;
  --icon-search-width: 1.125rem;
  --icon-search-height: 1.125rem;
  --icon-search-url: url('/content/images/icons/search-line.svg');
  --input-background-color: #fff;
  --input-search-color: var(--brand-dark-blue);
  --input-search-gap: 0.625rem;
  --input-search-border-color: var(--brand-dark-blue-20);
  --input-search-border-width: 1px;
  --input-search-border-radius: 0.625rem;
  --input-search-padding-y: 0.875rem;
  --input-search-padding-x: 1.25rem;
  position: relative;
  width: 100%;
}

.search-input-wrapper .search-input {
  --input-search-padding-left: calc(var(--input-search-padding-x) + var(--icon-search-width) + var(--input-search-gap));
  border-radius: var(--input-search-border-radius);
  border: var(--input-search-border-width) solid var(--input-search-border-color);
  line-height: 150%;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding: var(--input-search-padding-y) var(--input-search-padding-x) var(--input-search-padding-y) var(--input-search-padding-left);
  width: 100%;
  color: var(--input-search-color);
  background-color: var(--input-background-color);
}

.search-input-wrapper .search-input:focus {
  --input-search-border-color: var(--brand-blue-secondary);
  caret-color: var(--brand-blue-secondary);
}

.search-input-wrapper:before {
  content: '';
  position: absolute;
  width: var(--icon-search-width);
  height: var(--icon-search-height);
  -webkit-mask-image: var(--icon-search-url);
  mask-image: var(--icon-search-url);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: bottom;
  background-color: var(--icon-search-color);
  top: 50%;
  left: var(--input-search-padding-x);
  transform: translateY(-50%);
}

.presenter-courses {
  display: grid;
  gap: var(--presenter-courses-list-gap);
  grid-template-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(332px, 1fr));
  width: 100%;

  @media screen and (min-width: 1050px) {
    &.single-item {
      grid-template-columns: repeat(auto-fit, minmax(332px, 0));
    }
  }

  @media screen and (min-width: 1460px) {
    &.two-item {
      grid-template-columns: repeat(auto-fit, minmax(332px, 0));
    }
  }

  @media screen and (max-width: 768px) {
    display: flex;
    flex-direction: column;
  }
}

.course-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  row-gap: 17.5px;
  flex-flow: column;
  flex: none;
  background: #fff;
  border: 1px solid var(--presenter-course-item-border-color);
  border-radius: var(--presenter-course-item-border-radius);
  transition: box-shadow 0.2s, transform 0.2s;
  width: 100%;
}

.course-item:hover {
  --presenter-course-item-border-color: var(--brand-blue-main);
  transform: translate(0, -2px);
  box-shadow: 0 8px 12px var(--brand-blue-secondary-30);
}

.course-item .course-top-item-wrapper {
  position: relative;
  inset: -1px;
  width: calc(100% + 2px);
  border-radius: inherit;
  overflow: hidden;
}

.course-item .course-top-item-wrapper .course-hours-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(233, 250, 253, 0.8);
  backdrop-filter: blur(2px);
  border-radius: 3.125rem;
  padding: 0.25rem;
  font-size: 12px;
  text-transform: uppercase;
}

.course-item .course-top-item-wrapper .course-hours-tag .start-time-text {
  color: var(--brand-dark-blue);
  padding-right: 0.625rem;
  white-space: nowrap;
}

.course-item .course-top-item-wrapper .course-tag {
  white-space: nowrap;
  padding: 0.3125rem 0.625rem;
  background: #ffffff;
  box-shadow: 0 0 4px var(--brand-blue-secondary-40);
  border-radius: inherit;
}

.course-item .course-top-item-wrapper .course-tag.live {
  color: var(--brand-logo-orange);
}

.course-item .course-top-item-wrapper .course-tag.on-demand {
  color: var(--brand-logo-blue);
}

.course-item .course-top-item-wrapper .course-top-item {
  aspect-ratio: 1.6038647343;
  object-fit: cover;
  border-radius: inherit;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.course-item .course-top-item-wrapper .course-top-item .course-image {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
}

.course-item .course-top-item-wrapper .course-top-item .btn-save-course {
  --icon-main-color: var(--white);
  --icon-reverse-color: var(--brand-blue-secondary);
  --icon-wrapper-width: 35px;
  --icon-wrapper-height: 35px;
  --icon-wrapper-border-radius: 50%;
  --icon-wrapper-border-width: 1px;
  --icon-wrapper-border-color: var(--brand-blue-secondary-10);
  --icon-wrapper-background-color: var(--white-10);
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
  z-index: 2;
  backdrop-filter: blur(7px);
  padding: 0;
}

.course-item .course-top-item-wrapper .course-top-item .btn-save-course:hover {
  --icon-wrapper-background-color: var(--white);
  transform: none;
}

.course-item .course-top-item-wrapper .course-top-item .btn-save-course.saved-course {
  --icon-main-color: #fff;
  --icon-reverse-color: var(--brand-blue-secondary);
}

.course-item .course-item-bottom {
  display: flex;
  gap: 0.625rem;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding-bottom: 1.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.course-item .course-item-bottom .course-info-wrapper {
  display: flex;
  gap: 0.625rem;
  color: var(--brand-blue-secondary);
  text-transform: uppercase;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
}

.course-item .course-item-bottom .course-info-wrapper .hero-course-type-wrapper {
  background-color: var(--brand-blue-secondary);
  color: var(--white);
  letter-spacing: 0;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.course-item .course-item-bottom .course-info-wrapper .course-read-time {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--brand-blue-secondary);
}

.course-item .course-item-bottom .course-item-info {
  display: flex;
  gap: 1.25rem;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  width: 100%;
}

.course-item .course-item-bottom .course-item-info .course-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: Reckless, serif;
  letter-spacing: -0.01em;
  font-size: 1.375rem;
  line-height: 135%;
  color: var(--brand-dark-blue);
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom {
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block {
  display: flex;
  gap: 0.625rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info {
  --dash-box-dash-size: 0.375rem;
  --dash-box-gap-size: 0.375rem;
  --dash-box-border-radius: 0.5rem;
  --dash-box-background-color: var(--brand-yellow-5);
  --dash-box-border-color: var(--brand-yellow);
  width: 100%;
  padding: 0.25rem;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info .course-info-inner {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 2.125rem;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info .course-info-inner .instructor-image {
  width: 2.125rem;
  height: 2.125rem;
  aspect-ratio: 1;
  border-radius: 0.375rem;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info .course-info-inner .instructor-image .no-image {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--brand-yellow);
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  line-height: 125%;
  justify-content: center;
  align-items: center;
  color: var(--brand-dark-blue);
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info .course-info-inner .instructor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info .course-info-inner .course-info-texts-wrapper {
  white-space: nowrap;
  flex-flow: column;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info .course-info-inner .course-info-texts-wrapper .instructor-name {
  font-size: 12px;
  line-height: 130%;
  letter-spacing: -0.02em;
  color: var(--brand-dark-blue);
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info .course-info-inner .course-info-texts-wrapper .no-wrap-caps-text-wrp {
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.course-item .course-item-bottom .course-item-info .course-item-info-bottom .course-info-block .course-info .course-info-inner .course-info-texts-wrapper .no-wrap-caps-text-wrp .instructor-title {
  font-size: 0.625rem;
  line-height: 130%;
  letter-spacing: -0.02em;
  color: var(--brand-grey);
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

/* Review Pagination */
.presenter-courses-pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 20px;
  width: 100%;
}

.presenter-courses-page-navigator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.presenter-courses-page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.presenter-courses-pagination-container .btn-arrow {
  --icon-main-color: var(--brand-dark-blue);
  --icon-reverse-color: #ffffff;
  --icon-wrapper-width: 42px;
  --icon-wrapper-height: 42px;
  --icon-wrapper-border-radius: 50%;
}

.presenter-courses-pagination-container .btn-number {
  --btn-brand-border-radius: 50%;
  --btn-brand-color: var(--brand-dark-blue);
  --btn-brand-padding: 0;
  --btn-brand-border-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
}

.presenter-courses-pagination-container .btn-number:hover {
  background: var(--btn-main-color-reverse);
  color: var(--btn-main-color);
  transform: none;
}

.presenter-courses-pagination-container .btn-number.active {
  --btn-main-color: var(--brand-blue-secondary);
  --btn-brand-color: var(--white);
  pointer-events: none;
}

.presenter-courses-pagination-container .btn-number:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.presenter-courses-pagination-container .presenter-courses-pagination-prev,
.presenter-courses-pagination-container .presenter-courses-pagination-next {
  padding: 0;
}

@media screen and (max-width: 1200px) {
  .presenter-courses-pagination-container .btn-number {
    --btn-brand-font-size: 14px;
    line-height: 2px;
    width: 30px;
    height: 30px;
  }
}

.no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 24.25rem;
  gap: 1.25rem;
  margin: 0 auto;
}

.no-data-container .no-data-icon {
  --icon-width: 34.49px;
  --icon-height: 36.68px;
  --icon-color: var(--brand-red);
}

.no-data-container .no-data-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.no-data-container .no-data-content .title {
  font-family: Reckless, serif;
  font-size: 28px;
  line-height: 130%;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--brand-dark-blue);
}

.no-data-container .no-data-content .description {
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.01em;
  color: #000;
  opacity: 0.6;
}