/* Main carousel container */
._carouselContainer_1uyk5_2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 540px;
  flex-direction: column;
  overflow-x: hidden;
  box-sizing: border-box;
}
/* Hide scrollbar for webkit browsers */
._carouselContainer_1uyk5_2::-webkit-scrollbar {
  display: none;
}

/* Pagination Header */
._paginationHeader_1uyk5_17 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 45px;
  gap: 8px;
  box-sizing: border-box;
}
._resultsText_1uyk5_26 {
  font-size: 14px;
  font-weight: 400;
  color: rgb(84, 84, 84);
  line-height: 1.5;
}

/* Horizontal scroll wrapper */
._cardsWrapper_1uyk5_34 {
  display: flex;
  flex-wrap: nowrap;  /* Keep cards on a single row */
  justify-content: space-around;
  overflow-x: hidden;
  overflow-y: visible;
  margin: 0;
  gap: 16px;
  scroll-padding: 20px;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  box-sizing: border-box; /* Ensure padding is inside the wrapper */
  max-width: 100%;
}
/* Hide scrollbar for webkit browsers */
._cardsWrapper_1uyk5_34::-webkit-scrollbar {
  display: none;
}

/* Empty state */
._emptyState_1uyk5_55 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: #666;
  font-size: 14px;
}

/* Card header */
._cardHeader_1uyk5_65 {
  color: var(--neon-color-link-default, #1162ee) !important;
}

/* Target the link inside NeonCardHeader */
._cardHeader_1uyk5_65 a {
  color: var(--neon-color-link-default, #1162ee) !important;
  text-decoration: none;
}

._cardHeader_1uyk5_65 a:hover {
  color: var(--neon-color-link-hover, #0d4ebd) !important;
  text-decoration: underline;
}

/* Target the heading text inside NeonCardHeader */
._cardHeader_1uyk5_65 .neon-card-header__heading,
._cardHeader_1uyk5_65 [class*="heading"] {
  color: var(--neon-color-link-default, #1162ee) !important;
}

/* Card body customization */
._cardBody_1uyk5_87 {
  display: flex;
  flex-direction: column;
  height: fit-content;
  width: 304px;
  overflow: hidden;
  gap: 20px;
  box-sizing: border-box;
}

/* Description */
._description_1uyk5_98 {
  height: 40px;
  margin: 0;
}

/* Tags container */
._tagsContainer_1uyk5_104 {
  display: flex;
  height: 24px;
  gap: 8px;
  flex-wrap: wrap;
}

/* Use cases section */
._useCasesSection_1uyk5_112 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._useCasesHeader_1uyk5_118 {
  display: flex;
  max-height: 20px;
  align-items: center;
  gap: 4px;
  font-family: roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--neon-color-text-default, #333);
}

._useCasesList_1uyk5_130 {
  margin: 0;
  padding-left: 10px !important;
  font-family: roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--neon-color-text-default, #333);
}

._useCasesList_1uyk5_130 li {
  display: block;
}

._useCaseText_1uyk5_144 {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  cursor: pointer;
}

._useCasesList_1uyk5_130 li:last-child {
  margin-bottom: 0;
}
.powerbuddy-staff-render {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: light) {
  .powerbuddy-staff-render {
    color: #213547;
    background-color: #ffffff;
  }
}
/* Host class styles for the layout */
.powerbuddy-staff-render {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

/* The logo styles */
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

/* Keyframes animation for logo spinning */
@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* Centering content within the container */
#powerbuddy-staff-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.nav-staff-chat-launcher .neon-ai-chat-launcher {
    background: #e9f5f8;
    border: none;
}

.nav-staff-chat-launcher .neon-ai-chat-launcher .neon-ai-chat-launcher-input-container {
    margin-top: 12px;
    margin-bottom: 10px;
}