.collections-by-grade-container {
  padding-top: 70px;
  background: #222;
}

.collections-by-grade-header {
  background: #222;
}

#mainContent .grade-header-section--title {
  color: #fff !important;
  font-size: 48px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 57.6px;
  letter-spacing: -1.2px;
  padding: 0px !important;
}

.grade-header--recommendation span {
  color: #fff;
  text-align: center;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 4.7px;
}

.recommendation-links a {
  color: #33B6E4;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 24.7px;
}

.grade-section--title-desc h2 {
  color: #fff;
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
  line-height: 54px;
  letter-spacing: -0.9px;
}

.grade-section--title-desc p {
  color: #DAF2EE;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 24.7px;
  margin-bottom: 30px;
}

.collections-by-grade-prek-2 {
  background: #076B9D;
}
.collections-by-grade-3-5 {
  background: #65308A;
}
.collections-by-grade-6-8 {
  background: #D3001A;
}
.collections-by-grade-9-12 {
  background: #7D6816;
}

.grade-header--content,
.section--grade-prek-2,
.section--grade-3-5,
.section--grade-6-8,
.section--grade-9-12 {
  display: flex;
  padding: 50px 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  max-width: 1440px;
}

.event-card--chip {
    position: absolute;
    right: 10px;
    bottom: 10.5px;
}

.event-badge {
    padding: 8px;
    border-radius: 0px;
    color: #413B3B;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.collections-grade-author-details {
    padding: 15px;
    /* display: flex; */
    /* flex-direction: column; */
    height: 100%;
    background: #fff;
}

.collections-grade-title h5, .event-card--title {
    overflow: hidden;
    color: #011D3D;
    text-overflow: ellipsis;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.14px;
    min-height: 68px;

    a {
      color: #011D3D;

      &:hover {
        opacity: 0.8;
      }

      &:focus,&:focus-visible {
        outline: none;
        text-decoration: underline !important;
      }
    }
}

.collections-grade-image {

  a {

    &:hover {
      img {
        opacity: 0.8;
      }
    }
  }
}

.collections-grade-author .row {
    padding: 15px;
}

.collections-grade-author .avatar {
    justify-content: center;
    align-items: center;
    display: flex;
}

.collections-grade-author .author-avatar {
    border-radius: 40px;
    max-width: 40px;
    height: auto;
}

.author {
    padding: 0px;
}

.author span {
    color: #413b3b;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18.2px;
}

.grade-level {
    text-align: center;
    padding: 0px;
}

.grade-level span {
    color: #413b3b;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 8px;
    background: #F0F6FC;
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-card--content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1 0 0;
  align-self: stretch;
}

.event-card--description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}

.event-card--description p {
    color: #14141C;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18.2px;
}


.main-event--button {
    display: flex;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background: #43414B;
    color: #DAF2EE;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.4px;
    text-transform: uppercase;
}

.main-event--button:hover {
    background: #605D6D;
    color: #DAF2EE;
}

.grade-header--search .search-input {
  display: flex;
  max-width: 900px !important;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.top-mobile-menu,
.tablet-menu .top-tablet-menu,
.top-desktop-menu {
    background: rgba(52, 58, 64, 0.85) !important;
}

.top-mobile-menu .top-search-box,
.top-tablet-menu .top-search-box,
.top-desktop-menu .top-search-box {
  visibility: hidden !important;
  pointer-events: none !important;
}

.grade-header--search .navbar-form {
    position: relative;
    max-width: 900px;
}

.grade-header--search .search-input {
    width: 100%;
    padding-right: 45px;
    height: 40px;
}


.grade-header--search .btn-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.grade-header--search #top-nav-header-search {
  padding-left: 0px;
  padding-bottom: 10px;
}

.recommendation-links {
  color: #fff;
}

.grade-section--view-more {
  display: flex;
  padding: 10px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1B6D89;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  height: 55px;
}

.view-more-container {
  padding-bottom: 15px;
}

.avatar {
  padding-left: 0px !important;
  padding-right: 10px !important;
}

@media(max-width: 1024px) and (min-width: 320px) {
  .collections-by-grade-container {
    padding-top: 0px !important;
  }

  .grade-header--search .btn-search {
    right: 20px;
  }
}

@media (min-width: 320px) and (max-width: 575px) {
    body #mainNav {
        display: none !important;
    }
}

@media (max-width: 425px) {
  .grade-header--recommendation .recommendation-label,
  .grade-header--recommendation .recommendation-links--url {
    display: block;
  }

  .grade-header--recommendation .recommendation-label {
      margin-bottom: 0.25rem;
  }
}