.bb-dashboard {
  padding-right: 1rem;
}

.bb-dashboard h2 {
  font-size: 1.3rem;
}

.bb-dashboard hr {
  margin: 2rem 0;
}

.bb-dashboard-notice h2 {
  margin: 0;
  flex-basis: 100%;
}
.bb-dashboard-notice .notice__title {
  margin: 0;
}
.bb-dashboard-notice .notice__number {
  font-size: 1.5rem;
  margin: 0;
}

.countries-members {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.countries-members li {
  font-size: 1rem;
}

#member-list-container {
  padding-top: 1em;
}

#pagination-controls button,
.view-details-btn {
  padding: 0.5rem 1rem !important;
  margin-right: 0.3rem;
  border: none;
  text-transform: capitalize !important;
  transition: opacity 0.2s ease-in-out;
  width: fit-content;
}
#pagination-controls button:hover,
#pagination-controls button:focus,
.view-details-btn:hover,
.view-details-btn:focus {
  border: none;
  outline: none;
  background-color: var(--e-global-color-primary) !important;
  opacity: 0.8;
}

.profile-courses {
  margin-top: 2rem;
}
.profile-courses h3 {
  font-size: 17px !important;
  margin-bottom: 1em;
}
.course-progress {
  margin: 0 0 2rem 0;
  border: 0.5px solid #f0f0f0;
  border-radius: 0.5rem;
  padding: 1rem;
}
.course-progress:not(:last-child) {
  border-bottom: 1px solid #d8d8d8;
}
.course-progress-title {
  font-size: 15px !important;
  margin: 0;
}
.ld-progress {
  margin-bottom: 0 !important;
}

.profile-data {
  font-size: 16px;
}

#member-list-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 24px 0;
}

@media (max-width: 768px) {
  #member-list-container {
    grid-template-columns: 1fr;
  }
}

.member-detail-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 32px;
  height: 146px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  justify-content: space-between;
}

.member-detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.member-detail-content {
  flex: 1;
  display: flex;
  gap: 4px;
  justify-content: space-between;
}

.member-btn-wrapper {
  display: flex;
  align-items: center;
}

.member-detail-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-detail-name {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
}

.member-detail-date {
  font-size: 14px;
  color: #888;
}

.view-details-btn {
  background-color: #FF6A00;
  color: white;
  display: flex;
  height: 36px;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-details-btn:hover {
  background-color: #e85c00;
}

.member-details {
  margin-top: 10px;
  display: none;
}

/* Profile Data Details Modal */
.profile-data {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 450px;
  font-family: sans-serif;
}

.profile-header {
  text-align: center;
}

.profile-avatar {
  width: 100%;
  background: rgba(255, 213, 191, 0.50);
  display: flex;
  padding-inline: 58px;
  gap: 16px;
  height: 148px;
}

.profile-avatar-bg {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 6px solid var(--WV-Orange, #FF6B00);
  bottom: -40px;
  position: relative;

  img {
    border-radius: 50% !important;
  }
}

.profile-avatar-overlay {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}

.profile-avatar-overlay p {
  margin: 0 !important;
}


.profile-title .profile-name {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.profile-date {
  font-size: 14px;
  color: #6b7280;
  margin-top: 2px;
}

.profile-info {
  padding: 60px 16px 16px 58px !important;
  color: #666;
  text-align: left;
  background-color: white;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; 
}

.profile-info p {
  margin: 0 !important;
  font-family: 'Lato' !important;
}

.profile-courses {
  padding: 29px 60px 16px 60px;
  color: #374151;
  font-family: 'Lato' !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  background-color: white;
}

.profile-courses h4 {
  margin: 12px 0 6px;
  font-weight: 600;
  font-family: 'Lato' !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  color: #666 !important;
}

.profile-courses p {
  margin: 0 !important;
  font-family: 'Lato' !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  text-align: left;
  color: #666 !important;
}

.profile-footer {
  text-align: center;
  padding: 16px;
  background-color: white;
}

.profile-username {
  font-family: 'Lato' !important;
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px; 
  letter-spacing: -0.127px;
}

.profile-date {
  font-family: 'Lato' !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; 
}

.profile-close-btn {
  background-color: #ff5c00;
  color: white;
  border: none;
  padding: 16px 32px !important;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  text-transform: capitalize !important;
}

.profile-close-btn:hover {
  background-color: #111222 !important;
}

.popular-posts .popular-post {
  border: 1px solid #e7e9ec;
  border-radius: 8px;
  box-shadow: 0 6px 24px 0 rgba(18, 43, 70, 0);
  padding: 15px 15px 10px;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.popular-posts .popular-post a {
  font-size: 14px;
}

.popular-posts .popular-post p {
  margin: 0;
}

.popular-post .popular-post__content {
  font-size: 18px;
  margin-bottom: 12px;
}

.popular-post .popular-post__author,
.popular-post .popular-post__comments {
  font-size: 16px;
  color: #9f9f9f;
}

#filters {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .member-detail-card {
    flex-direction: column;
  }

  .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: auto;
  }
}

@media (max-width: 767px) {
  #filters {
    flex-direction: column;
  }
}

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #EEF2F7;
  color: #000A26;
  padding: 8px 8px 8px 12px;
  font-size: 16px;
  border-radius: 4px;
  width: 100%;
  font-family: 'Poppins' !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.0002 15.5002C11.8686 15.5009 11.7381 15.4757 11.6163 15.426C11.4944 15.3762 11.3836 15.3029 11.2902 15.2102L7.29019 11.2102C7.19695 11.1169 7.12299 11.0063 7.07253 10.8844C7.02207 10.7626 6.99609 10.632 6.99609 10.5002C6.99609 10.3683 7.02207 10.2378 7.07253 10.1159C7.12299 9.99411 7.19695 9.88342 7.29019 9.79018C7.38342 9.69695 7.49411 9.62299 7.61594 9.57253C7.73776 9.52206 7.86833 9.49609 8.00019 9.49609C8.13204 9.49609 8.26261 9.52206 8.38444 9.57253C8.50626 9.62299 8.61695 9.69695 8.71019 9.79018L12.0002 13.1002L15.3002 9.92019C15.3922 9.8179 15.5043 9.73569 15.6295 9.6787C15.7547 9.62171 15.8903 9.59118 16.0279 9.589C16.1654 9.58682 16.302 9.61304 16.4289 9.66603C16.5559 9.71903 16.6705 9.79764 16.7657 9.89697C16.8609 9.99629 16.9346 10.1142 16.9821 10.2433C17.0297 10.3724 17.0501 10.5099 17.042 10.6472C17.034 10.7846 16.9977 10.9188 16.9355 11.0414C16.8732 11.1641 16.7863 11.2726 16.6802 11.3602L12.6802 15.2202C12.4973 15.3965 12.2542 15.4966 12.0002 15.5002Z' fill='%23000A26'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25em;
}