/* =========================
   Global safety / base
   ========================= */

.prevent-interaction::after {
  /* position: relative !important; */
}

html,
body {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: clip !important;
}

/* Ensure pseudo overlays never block clicks (leave disabled unless needed)
.AL_Custom_CardImage::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}
*/

/* =========================
   TOP NAV / HEADER BACKDROP
   ========================= */

.academy-navigation {
  position: relative;
  background: rgb(23, 1, 47) !important;
  margin: unset !important;
  width: 100% !important;
  height: unset !important;
}

.AL_Custom_NavBg {
  background: rgb(23, 1, 47) !important;
  position: unset !important;
}

.AL_Custom_NavLoginButton {
  margin: 0 0 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* height: 44px !important;
  min-height: 44px !important; */
  box-sizing: border-box !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.academy-navigation-content-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  
  /* max-width: 1320px !important; */
  margin: 24px auto 0 !important;
  width: 100% !important;
  border-radius: 12px !important;
  background: rgb(41, 6, 84) !important;
  padding: 10px !important;
}

@media (max-width: 1024px) {
  .academy-navigation {
    height: 64px !important;
  }

  .academy-navigation-content-wrapper {
    margin: 0 auto !important;
    height: 64px !important;
    box-sizing: border-box !important;
  }

  .academy-navigation-content-wrapper .AL_Custom_NavSearchTriggerMob,
  .academy-navigation-content-wrapper .AL_Custom_NavSearchCloseMob {
    display: none !important;
  }

  /* Hide off-canvas custom links when mobile menu toggles are disabled */
  .academy-navigation-content-wrapper .AL_Custom_NavCustomLinksList {
    display: none !important;
  }

  .academy-navigation-content-wrapper [class*="SearchBarWrapper-"] {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .academy-navigation-content-wrapper .AL_Custom_NavSearchBar {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: 100% !important;
  }

  .academy-navigation-content-wrapper .AL_Custom_NavLoginButton {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    box-sizing: border-box !important;
  }

  .academy-navigation-content-wrapper [class*="AcademyAvatarWrapper-"] {
    order: 1 !important;
    height: unset !important;
  }
}

.academy-navigation-content-wrapper .academy-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  translate: 0 2px !important;
}

.academy-navigation-content-wrapper .academy-logo {
  display: block !important;
}

/* Logged-in avatar should occupy the right-side action slot. */
.academy-navigation-content-wrapper [class*="AcademyAvatarWrapper-"] {
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: center !important;
  flex: 0 0 auto !important;
}

.academy-navigation-content-wrapper [class*="SearchBarWrapper-"],
.academy-navigation-content-wrapper .AL_Custom_NavSearchBar {
  /* display: none !important; */
  align-items: center !important;
}

.academy-navigation-content-wrapper [class*="SearchBarWrapper-"] {
  order: 10 !important;
  flex: 1 0 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.academy-navigation-content-wrapper [class*="BackToLinkSpacer-"] {
  display: none !important;
}

.academy-navigation-content-wrapper .AL_Custom_NavSearchBar {
  width: 100% !important;
}

.academy-navigation-content-wrapper .academy-search-bar-wrapper {
  height: 44px !important;
  min-height: 44px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.academy-navigation-content-wrapper .academy-search-bar-wrapper>div,
.academy-navigation-content-wrapper .academy-search-bar-wrapper [class^="StyledStack-"] {
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}

.academy-navigation-content-wrapper .academy-search-bar-wrapper [class*="InputWrapper-"],
.academy-navigation-content-wrapper .academy-search-bar-wrapper input[type="search"] {
  height: 44px !important;
  min-height: 44px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .academy-navigation-content-wrapper {
    flex-wrap: nowrap !important;
    
  }

  .academy-navigation-content-wrapper [class*="SearchBarWrapper-"] {
    order: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .academy-navigation-content-wrapper .AL_Custom_NavSearchBar {
    display: block !important;
    position: static !important;
    width: 100% !important;
  }
}

@media (max-width: 1439px) {
  .academy-navigation-content-wrapper .AL_Custom_NavLoginButton {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .academy-navigation-content-wrapper .AL_Custom_NavLoginButton {
    margin-left: 12px !important;
    margin-right: 0 !important;
  }
}

.AL_Custom_BannerMainHeading {
  text-align: center !important;
}

.AL_Custom_NavBg {
  grid-area: banner !important;
}

.AL_Custom_NavBg::after {
  background: unset !important;
}

.AL_Custom_NavBg .academy-content-banner-wrapper {
  /* max-width: 1320px !important; */
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  
}

.AL_Custom_NavBg .academy-content-banner-wrapper .academy-banner-content {
  position: relative !important;
  z-index: 2 !important;
}

#main>div[class*="AcademyBanner-"].academy-banner.AL_Custom_NavBg {
  position: relative;
  overflow: hidden;
  padding: 120px 0 60px !important;
}

.academy-banner {
  display: none;
}

/* @media (max-width: 1024px) {
  .academy-banner::after {
    right: -280px !important;
    width: min(66vw, 560px) !important;
    opacity: 0.2 !important;
  }
}

@media (max-width: 1024px) {
  .academy-banner::after {
    display: none !important;
  }
} */

/* =========================
   LEFT SIDEBAR (desktop/tablet)
   ========================= */

[class*="AcademySubMenuWrapper-"] nav,
.AL_Custom_TabBar nav {
  width: 100%;
  margin: unset !important;
  max-width: 100% !important;
  padding: unset !important;
  background: rgb(41, 6, 84) !important;
}

.AL_Custom_TabBar {
  position: sticky !important;
  top: 0 !important;
  grid-area: sidebar !important;

  background: rgb(41, 6, 84) !important;
  border-radius: 0 !important;

  height: 100% !important;
  width: max-content !important;
}

.AL_Custom_TabBar nav ul[role="menubar"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;

  padding: 0 !important;
  margin: 0 !important;
  /*
  width: 25vw !important; */
  background: transparent !important;
}

.AL_Custom_TabBar nav ul[role="menubar"]>li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.AL_Custom_TabBar nav ul[role="menubar"]>li a {
  margin: unset !important;
  padding: 4px !important;
}

.AL_Custom_TabBar a[role="menuitem"],
.AL_Custom_TabBar a[role="menuitem"].active {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  /* padding-block: 10px !important; */
  color: rgb(244, 239, 249) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  width: 100% !important;
  border-radius: 8px !important;
}

.AL_Custom_TabBar a[role="menuitem"].active {
  background: rgb(145, 73, 241) !important;
}

/* CSS-only sidebar icons */
.AL_Custom_TabBar a[role="menuitem"]::before,
.AL_Custom_TabBar a[role="menuitem"].active::before {
  content: "\f111" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: 0 0 24px !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: rgb(244, 239, 249) !important;
  background: none !important;
}

.AL_Custom_TabBar a[role="menuitem"][href*="/my_trainings"]::before,
.AL_Custom_TabBar a[role="menuitem"].active[href*="/my_trainings"]::before {
  content: "\f19d" !important;
}

.AL_Custom_TabBar a[role="menuitem"][href="/"]::before,
.AL_Custom_TabBar a[role="menuitem"][href*="/index.html"]::before,
.AL_Custom_TabBar a[role="menuitem"][href*="/catalog"]::before,
.AL_Custom_TabBar a[role="menuitem"].active[href="/"]::before,
.AL_Custom_TabBar a[role="menuitem"].active[href*="/index.html"]::before,
.AL_Custom_TabBar a[role="menuitem"].active[href*="/catalog"]::before {
  content: "\f02d" !important;
}

.AL_Custom_TabBar a[role="menuitem"][href*="/trainings"]::before,
.AL_Custom_TabBar a[role="menuitem"].active[href*="/trainings"]::before {
  content: "\f109" !important;
}

.AL_Custom_TabBar a[role="menuitem"][href*="/events"]::before,
.AL_Custom_TabBar a[role="menuitem"].active[href*="/events"]::before {
  content: "\f0a1" !important;
}

.AL_Custom_TabBar a[role="menuitem"][href*="/paths"]::before,
.AL_Custom_TabBar a[role="menuitem"].active[href*="/paths"]::before {
  content: "\f0ca" !important;
}

.AL_Custom_TabBar a[role="menuitem"][href*="/certifications"]::before,
.AL_Custom_TabBar a[role="menuitem"].active[href*="/certifications"]::before {
  content: "\f091" !important;
}

.BU_SidebarMenuIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgb(116, 31, 254) !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  line-height: 1 !important;
}

.BU_SidebarMenuIcon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.BU_SidebarMenuIcon svg [stroke] {
  stroke: currentColor !important;
}

.BU_SidebarMenuIcon svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

.BU_SidebarMenuLabel {
  color: inherit !important;
  font-weight: inherit !important;
}

.AL_Custom_Template>.AL_Custom_TabBar a[role="menuitem"]:hover .BU_SidebarMenuIcon,
.AL_Custom_Template>.AL_Custom_TabBar a[role="menuitem"].active .BU_SidebarMenuIcon {
  color: rgb(116, 31, 254) !important;
}

.AL_Custom_Template>.AL_Custom_TabBar a[role="menuitem"]:hover {
  font-weight: 700 !important;
  background: #eef0f3 !important;
  border-bottom: none !important;
}

[class*="CountingBadgeWrapper-"] {
  background: rgb(23, 1, 47) !important;
}

.AL_Custom_Template>.AL_Custom_TabBar a.active {
  font-weight: 700 !important;
  background: #eef0f3 !important;
  border-bottom: none !important;
}

/* =========================
   LAYOUT / GRID AREAS
   ========================= */

.academy-content>[class^="StyledStack-"]>[class^="StyledRow-"]>[class^="StyledCol-"] {
  display: flex;
  flex-direction: column;
}

.academy-content [class^="StyledStack-"]>div:first-of-type {
  display: flex !important;
  flex-direction: row !important;
}

/* Catalog should keep filter + results stacked, not side-by-side */
.AL_Custom_Template_Catalog .academy-content>[class^="StyledStack-"]>div:first-of-type {
  flex-direction: column !important;
  align-items: stretch !important;
}

.AL_Custom_Template_Catalog .academy-content>[class^="StyledStack-"]>div:first-of-type>[class^="StyledCol-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

/* My Trainings: avoid persistent two-column split that leaves a large empty left gutter */
main:has(.AL_Custom_TabBar a[role="menuitem"].active[href*="/my_trainings"]) .academy-content>[class^="StyledStack-"]>div:first-of-type {
  flex-direction: column !important;
  align-items: stretch !important;
}

main:has(.AL_Custom_TabBar a[role="menuitem"].active[href*="/my_trainings"]) .academy-content>[class^="StyledStack-"]>div:first-of-type>[class^="StyledCol-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

.AL_Custom_Template> :not(.AL_Custom_TabBar) {
  min-width: 0 !important;
}

.AL_Custom_BreadcrumbBar[role="list"] {
  margin-top: 16px !important;
  color: #6b7280 !important;
  max-width: unset !important;
}

.AL_Custom_Breadcrumb a span,
.AL_Custom_Breadcrumb a [class^="StyledText-"] {
  color: rgb(116, 31, 254) !important;
}

.AL_Custom_Breadcrumb a,
.AL_Custom_Breadcrumb a:visited,
.AL_Custom_Breadcrumb a:hover,
.AL_Custom_Breadcrumb a:focus {
  color: rgb(116, 31, 254) !important;
  text-decoration-color: rgb(116, 31, 254) !important;
}

.AL_Custom_Breadcrumb>span,
.AL_Custom_Breadcrumb>[class^="StyledText-"] {
  color: #6b7280 !important;
}

[class*="AcademyWrapper-"] {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

main {
  display: grid !important;
  flex: 1 0 auto !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* grid-template-areas:
    "banner banner"
    "sidebar bc"
    "sidebar content"
    "footer footer" !important;
  grid-template-columns: auto 1fr !important; */
}

@media (min-width: 1600px) {
  main {
    max-width: unset !important;
  }

  .AL_Custom_CardContainer {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

[class*="ContentCardContent-"] {
  margin-top: unset !important;
}

main>.academy-banner,
main>.AL_Custom_NavBg {
  /* width: 100vw !important; */
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

main [class*="AcademyBreadcrumbWrapper-"] {
  grid-area: bc !important;
  z-index: 1;
}

[class*="AcademyContentWrapper-"].academy-content-wrapper {
  grid-area: content !important;
  /* padding: unset !important; */
}

/* My Trainings renders multiple content wrappers; keep them stacked on desktop. */
@media (min-width: 1025px) {
  .AL_Custom_Template_MyTrainings main>[class*="AcademyContentWrapper-"].academy-content-wrapper {
    grid-area: auto !important;
    grid-column: 2 !important;
    width: auto !important;
  }

  .AL_Custom_Template_MyTrainings .academy-content>.academy-cards-wrapper.AL_Custom_CardContainer:has(> [class*="StatsWrapper-"]),
  .AL_Custom_Template_MyTrainings .academy-content>.academy-cards-wrapper.AL_Custom_CardContainer:has(> [class*="AcademyProfileMyTrainingsWrapper-"]) {
    display: block !important;
  }
}

[class*="AcademyFooter-"] {
  z-index: 1 !important;
  margin-top: auto !important;
}

.AL_Custom_CardFooter[class*="ContentCardFooter-"],
[class*="ContentCardFooter-"].AL_Custom_CardFooter {
  height: unset !important;
  padding: 12px !important;
  align-items: center !important;
}

/* =========================
   CARDS
   ========================= */

.AL_Custom_CardContainer {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 40px 24px !important;
  justify-content: unset !important;
}

.AL_Custom_SingleCard {
  background: #ffffff !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18) !important;
  /* overflow:  !important; */
  width: 250px !important;
  margin-bottom: unset !important;
}

.AL_Custom_CardImage {
  height: 72px !important;
  position: relative !important;
}

.AL_Custom_CardShadows {
  width: 250px !important;
}

.AL_Custom_SingleCard * {
  color: inherit;
}

.AL_Custom_CardTitle {
  font-size: 1rem !important;
  margin-top: 1rem !important;
  font-weight: 700;
}

.AL_Custom_CardDescription {
  font-size: 0.75rem !important;
}

.AL_Custom_CardBody {
  padding: 1rem !important;
  /* height: 180px; */
}

[class*="CardContentMetasRight-"] {
  width: unset !important;
}

/* =========================
   Small adjustments / cleanups
   ========================= */

.AL_Custom_BannerMainHeading::after {
  /* content: "" !important; */
}

.academy-content-filter-wrapper {
  justify-content: flex-start;
}

[class*="AccordionContainer-"] {
  margin-top: unset !important;
  padding-top: unset !important;
  border-top: unset !important;
}

.academy-content [class^="StyledStack-"],
.academy-content [class^="StyledRow-"] {
  align-items: unset !important;
}

.academy-content [class^="StyledContainer-"] {
  width: 100% !important;
  border-right: unset !important;
}

.AL_Custom_BreadcrumbBar {
  padding-top: unset !important;
}

.academy-content {
  padding: 24px 0 80px !important;
}

/* Normalize breadcrumb -> content spacing when no filter controls are present. */
[class*="AcademyContentWrapper-"].academy-content-wrapper {
  margin-top: 0 !important;
}

[class*="AcademyContentWrapper-"].academy-content-wrapper:not(:has(.academy-content-filter-wrapper)) .academy-content {
  padding-top: 12px !important;
}

[class*="AcademyBreadcrumbWrapper-"] {
  width: unset !important;
  /* padding: 0 !important; */
}

.academy-content [class^="StyledStack-"] {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  background-color: #fff !important;
}

.academy-content [class^="StyledStack-"]>div:has(> [class*="TriggerWrapper-"]) {
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  min-width: 100% !important;
  overflow-x: scroll !important
}

/* =========================
   Checkbox checked styling
   ========================= */
.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"] {
  overflow: visible !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>div:first-child {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>div:first-child>input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  background-color: #ffffff !important;
  position: relative !important;
  background-clip: padding-box !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>div:first-child>input[type="checkbox"]::before {
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: translate(-50%, -58%) rotate(45deg) !important;
  transform-origin: center !important;
  opacity: 0 !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>div:first-child>input[type="checkbox"]:checked {
  background-color: rgb(41, 6, 84) !important;
  border-color: rgb(41, 6, 84) !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>div:first-child>input[type="checkbox"]:checked::before {
  opacity: 1 !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>div:first-child>input[type="checkbox"]:focus,
.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>div:first-child>input[type="checkbox"]:focus-visible {
  outline: none !important;
  border-color: rgb(41, 6, 84) !important;
  box-shadow: 0 0 0 3px rgba(41, 6, 84, 0.35) !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>div:first-child>input[type="checkbox"]:active {
  border-color: rgb(41, 6, 84) !important;
  box-shadow: 0 0 0 3px rgba(41, 6, 84, 0.35) !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"] label[class*="StyledLabel-"]>[class*="StyledCheckbox-"] {
  display: none !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckbox-"] svg path {
  stroke: #ffffff !important;
}

[class*="AcademyContentFilterWrapper-"] [class*="DropdownList-"] li>label,
[class*="AcademyContentFilterWrapper-"] [class*="dropdown--list"] li>label {
  display: flex !important;
  align-items: center !important;
}

[class*="AcademyContentFilterWrapper-"] li>label>input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 8px 0 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  background-color: #ffffff !important;
  position: relative !important;
  background-clip: padding-box !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

[class*="AcademyContentFilterWrapper-"] li>label>input[type="checkbox"]::before {
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: translate(-50%, -58%) rotate(45deg) !important;
  transform-origin: center !important;
  opacity: 0 !important;
}

[class*="AcademyContentFilterWrapper-"] li>label>input[type="checkbox"]:checked {
  background-color: rgb(41, 6, 84) !important;
  border-color: rgb(41, 6, 84) !important;
}

[class*="AcademyContentFilterWrapper-"] li>label>input[type="checkbox"]:focus,
[class*="AcademyContentFilterWrapper-"] li>label>input[type="checkbox"]:focus-visible {
  outline: none !important;
  border-color: rgb(41, 6, 84) !important;
  box-shadow: 0 0 0 3px rgba(41, 6, 84, 0.35) !important;
}

[class*="AcademyContentFilterWrapper-"] li>label>input[type="checkbox"]:active {
  border-color: rgb(41, 6, 84) !important;
  box-shadow: 0 0 0 3px rgba(41, 6, 84, 0.35) !important;
}

[class*="AcademyContentFilterWrapper-"]:has(li > label > input[type="checkbox"]:checked) .academy-content-filter-button {
  padding: 0.67em 1.5em;
  border-radius: 2px;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  background:
    conic-gradient(#130326 0 0) padding-box,
    linear-gradient(90deg,
      #7f22f3,
      rgba(234, 45, 127, 0.75) 37.5%,
      rgba(228, 0, 43, 0.75) 65.38%,
      rgba(255, 108, 4, 0.75) 100%) border-box;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
}

[class*="AcademyContentFilterWrapper-"] li>label>input[type="checkbox"]:checked::before {
  opacity: 1 !important;
}

.academy-content [class*="AccordionContainer-"] [class*="StyledCheckboxItem-"][class*="StyledCheckbox-"]>*+* {
  margin-top: 10px !important;
}

[class*="PanelWrapper-"]:not([hidden]) {
  padding: 10px !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.16) !important;
  position: absolute !important;
  z-index: 9999 !important;
  background-color: #fff !important;
}

[class*="AccordionContainer-"] button {
  gap: 0 !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  border-radius: 9999px !important;
  padding: 8px 12px !important;
  flex-direction: row-reverse !important;
}

[class*="AccordionContainer-"] button>svg {
  transition: all 0.3s ease !important;
}

[class*="AccordionContainer-"] button h3[class^="StyledText-"] {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* =========================
   MOBILE/TABLET: Horizontal top nav under the banner
   (CSS-only sticky behavior)
   ========================= */
@media (max-width: 1024px) {

  .academy-navigation {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
  }

  /* Put sidebar row above breadcrumbs/content */
  main {
    grid-template-areas:
      "banner banner"
      "sidebar sidebar"
      "bc bc"
      "content content"
      "footer footer" !important;
  }

  main,
  .AL_Custom_Template,
  [class*="AcademyWrapper-"],
  main [class*="AcademyBreadcrumbWrapper-"],
  [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .academy-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  main [class*="AcademyBreadcrumbWrapper-"],
  [class*="AcademyContentWrapper-"].academy-content-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .academy-content [class^="StyledRow-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .academy-content [class^="StyledCol-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important;
  }

  /* Sticky horizontal strip */
  body .AL_Custom_Template main .AL_Custom_TabBar {
    position: sticky !important;
    top: 64px !important;
    z-index: 60 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;

    /* background: #f4f5f7 !important; */
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* Horizontal, scrollable menubar */
  .AL_Custom_TabBar nav ul[role="menubar"],
  body .AL_Custom_Template main .AL_Custom_TabBar nav ul[role="menubar"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 16px !important;
    width: max-content !important;
    min-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    

    padding: 0 !important;
    margin: 0 !important;
  }

  .AL_Custom_TabBar nav ul[role="menubar"]::-webkit-scrollbar,
  body .AL_Custom_Template main .AL_Custom_TabBar nav ul[role="menubar"]::-webkit-scrollbar {
    height: 0 !important;
  }

  .AL_Custom_TabBar nav ul[role="menubar"]>li,
  body .AL_Custom_Template main .AL_Custom_TabBar nav ul[role="menubar"]>li {
    flex: 0 0 auto !important;
  }

  .AL_Custom_TabBar a[role="menuitem"],
  .AL_Custom_TabBar a[role="menuitem"].active,
  body .AL_Custom_Template main .AL_Custom_TabBar a[role="menuitem"],
  body .AL_Custom_Template main .AL_Custom_TabBar a[role="menuitem"].active {
    white-space: nowrap !important;
    /* padding: 10px 12px !important; */
    /* border-radius: 999px !important; */
  }

  .AL_Custom_CardContainer,
  .academy-cards-wrapper.AL_Custom_CardContainer[class*="AcademyThemeCards-"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .academy-content-filter-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* /profile/my_trainings renders two content wrappers; keep both in explicit rows. */
  .AL_Custom_Template_MyTrainings main {
    grid-template-areas:
      "banner banner"
      "sidebar sidebar"
      "bc bc"
      "content content"
      "content2 content2"
      "footer footer" !important;
  }

  .AL_Custom_Template_MyTrainings main>[class*="AcademyContentWrapper-"].academy-content-wrapper~[class*="AcademyContentWrapper-"].academy-content-wrapper {
    grid-area: content2 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {

  /* .AL_Custom_TabBar, */
  body .AL_Custom_Template main .AL_Custom_TabBar {
    top: 104px !important;
  }

  .academy-navigation {
    height: 104px !important;
  }

  .academy-navigation-content-wrapper {
    height: 104px !important;
  }
}

/* =========================
   Catalog cards: 3 across (desktop)
   ========================= */

/* Prefer grid for predictable columns */
.AL_Custom_CardContainer {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 40px 24px !important;
  justify-content: unset !important;
}

.academy-content [class^="StyledRow-"]:has(> [class^="StyledCol-"] > .AL_Custom_SingleCard) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 40px 24px !important;
  justify-content: unset !important;
}

.academy-content [class^="StyledRow-"]:has(> [class^="StyledCol-"] > .AL_Custom_SingleCard)>[class^="StyledCol-"] {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Let cards size to the grid cell (remove fixed width) */
.AL_Custom_SingleCard,
.AL_Custom_CardShadows {
  width: 100% !important;
}

/* Keep your existing styling; just avoid fixed sizing */
.AL_Custom_SingleCard {
  margin-bottom: 0 !important;
}

.academy-cards-wrapper.AL_Custom_CardContainer[class*="AcademyThemeCards-"]>*,
.academy-cards-wrapper.AL_Custom_CardContainer[class*="AcademyThemeCards-"] {
  padding-left: unset !important;
  padding-right: unset !important;
}

/* Responsive fallbacks */
@media (max-width: 1200px) {

  .AL_Custom_CardContainer {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .academy-content [class^="StyledRow-"]:has(> [class^="StyledCol-"] > .AL_Custom_SingleCard) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 992px) {

  .AL_Custom_CardContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .academy-content [class^="StyledRow-"]:has(> [class^="StyledCol-"] > .AL_Custom_SingleCard) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {

  .AL_Custom_CardContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .academy-content [class^="StyledRow-"]:has(> [class^="StyledCol-"] > .AL_Custom_SingleCard) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.academy-navigation-content-wrapper .AL_Custom_NavMenuBtnMob,
.academy-navigation-content-wrapper .AL_Custom_NavMenuCloseMob {
  display: none !important;
}

@media (max-width: 480px) {

  .AL_Custom_CardContainer {
    grid-template-columns: 1fr !important;
  }

  .academy-content [class^="StyledRow-"]:has(> [class^="StyledCol-"] > .AL_Custom_SingleCard) {
    grid-template-columns: 1fr !important;
  }
}

/* Trainings empty state: collapse reserved row height when no cards match */
.AL_Custom_Template_Trainings:not(:has(.AL_Custom_SingleCard)) .academy-content [class^="StyledStack-"]>[class^="StyledRow-"] {
  min-height: 0 !important;
  height: auto !important;
}

.AL_Custom_Template_Trainings:not(:has(.AL_Custom_SingleCard)) .academy-content [class^="StyledStack-"]>[class^="StyledRow-"]:empty {
  display: none !important;
}

/* =========================
   Desktop app shell: 20/80 split
   - top nav visually merged into left rail
   ========================= */
@media (min-width: 1025px) {

  /* Keep catalog academy content shell aligned with trainings academy content shell */
  .AL_Custom_Template_Catalog .academy-content {
    max-width: 1150px !important;
  }

  /* Match catalog desktop content gutters to trainings content gutters */
  .AL_Custom_Template_Catalog .academy-content>[class^="StyledStack-"]>[class^="StyledRow-"] {
    margin-left: -12px !important;
    margin-right: -12px !important;
  }

  .AL_Custom_Template_Catalog .academy-content>[class^="StyledStack-"]>[class^="StyledRow-"]>[class^="StyledCol-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .academy-navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 122px !important;
    width: 240px !important;
    z-index: 80 !important;
    background: #290654 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* overflow: hidden !important; */
  }

  .academy-navigation-content-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "logo login"
      "search search" !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height: 122px !important;
    padding: 14px 12px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    column-gap: 8px !important;
    
  }

  .academy-navigation-content-wrapper .AL_Custom_NavCustomLinksList {
    display: none !important;
  }

  .academy-navigation-content-wrapper .academy-logo-link {
    grid-area: logo !important;
    translate: none !important;
    min-width: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .academy-navigation-content-wrapper .academy-logo {
    width: 110px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .academy-navigation-content-wrapper [class*="SearchBarWrapper-"],
  .academy-navigation-content-wrapper .AL_Custom_NavSearchBar {
    grid-area: search !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    order: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .academy-navigation-content-wrapper .AL_Custom_NavLoginButton {
    grid-area: login !important;
    justify-self: end !important;
    margin: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    min-width: 78px !important;
    
  }

  main {
    grid-template-areas:
      "sidebar bc"
      "sidebar content"
      "sidebar content" !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }

  main>.academy-banner,
  main>.AL_Custom_NavBg {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }

  .AL_Custom_NavBg {
    grid-area: banner !important;
    background: transparent !important;
  }

  #main>div[class*="AcademyBanner-"].academy-banner.AL_Custom_NavBg {
    padding: 64px 20px 36px !important;
  }

  .AL_Custom_TabBar {
    position: fixed !important;
    top: 122px !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 79 !important;
    width: 240px !important;
    height: calc(100vh - 122px) !important;
    padding: 16px 16px 20px !important;
    background: rgb(41, 6, 84) !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .AL_Custom_TabBar nav ul[role="menubar"] {
    width: 100% !important;
    gap: 4px !important;
  }

  .AL_Custom_TabBar nav ul[role="menubar"]>li a,
  .AL_Custom_TabBar a[role="menuitem"],
  .AL_Custom_TabBar a[role="menuitem"].active {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    color: #f4eff9 !important;
    background: transparent !important;
  }

  .AL_Custom_Template>.AL_Custom_TabBar a[role="menuitem"]:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  .AL_Custom_TabBar a[role="menuitem"].active,
  .AL_Custom_Template>.AL_Custom_TabBar a.active {
    background: rgb(145, 73, 241) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  main [class*="AcademyBreadcrumbWrapper-"],
  [class*="AcademyContentWrapper-"].academy-content-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  [class*="AcademyFooter-"] {
    margin-left: 240px !important;
    width: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (min-width: 1280px) {
  .academy-navigation {
    width: 280px !important;
  }

  main {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }

  #main>div[class*="AcademyBanner-"].academy-banner.AL_Custom_NavBg {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .AL_Custom_TabBar {
    width: 280px !important;
  }

  main [class*="AcademyBreadcrumbWrapper-"],
  [class*="AcademyContentWrapper-"].academy-content-wrapper {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  [class*="AcademyFooter-"] {
    margin-left: 280px !important;
    width: auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

@media (min-width: 1600px) {
  .academy-navigation {
    width: 320px !important;
  }

  main {
    grid-template-columns: 320px minmax(0, 1fr) !important;
    min-height: 100% !important;
  }

  #main>div[class*="AcademyBanner-"].academy-banner.AL_Custom_NavBg {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  .AL_Custom_TabBar {
    width: 320px !important;
  }

  main [class*="AcademyBreadcrumbWrapper-"],
  [class*="AcademyContentWrapper-"].academy-content-wrapper {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  [class*="AcademyFooter-"] {
    margin-left: 320px !important;
    width: auto !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  .AL_Custom_Template_Catalog [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_Catalog main [class*="AcademyBreadcrumbWrapper-"],
  .AL_Custom_Template_Trainings [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_Trainings main [class*="AcademyBreadcrumbWrapper-"],
  .AL_Custom_Template_Events [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_Events main [class*="AcademyBreadcrumbWrapper-"],
  .AL_Custom_Template_Event [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_Event main [class*="AcademyBreadcrumbWrapper-"],
  .AL_Custom_Template_Paths [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_Paths main [class*="AcademyBreadcrumbWrapper-"],
  .AL_Custom_Template_Path [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_Path main [class*="AcademyBreadcrumbWrapper-"],
  .AL_Custom_Template_MyTrainings [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_MyTrainings main [class*="AcademyBreadcrumbWrapper-"],
  .AL_Custom_Template_Certifications [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_Certifications main [class*="AcademyBreadcrumbWrapper-"],
  .AL_Custom_Template_Certification [class*="AcademyContentWrapper-"].academy-content-wrapper,
  .AL_Custom_Template_Certification main [class*="AcademyBreadcrumbWrapper-"] {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* LOGIN PAGE */
[id^="AcademyLearnerLogin-"] [class*="AcademyWrapper-"] {
  background-color: rgb(41, 6, 84, 0.6) !important;
  background-size: 110% !important;
  display: grid !important;
  
}

@media (max-width: 1439px) {
  [id^="AcademyLearnerLogin-"] [class*="AcademyWrapper-"] {
    background-size: cover !important
  }
}

@media (max-width: 768px) {
  [id^="AcademyLearnerLogin-"] main {

    height: fit-content !important;
    margin-top: 75px !important;
  }
}

[id^="AcademyLearnerLogin-"] main,
[id^="AcademyLearnerForgotPassword-"] main {
  margin: auto !important;
  background: transparent !important;
  max-width: unset !important;
  width: unset !important;
  background: white !important;
  display: unset !important;
}


[class*="TriggerWrapper-"] {
  margin-right: 12px !important;
}

[class*="InputWrapper-"] {
  min-height: 44px !important;
  max-height: 44px !important;
}

/* Desktop nav lock: keep logo + login on row 1, search on row 2. */
@media (min-width: 1025px) {
  body .academy-navigation .academy-navigation-content-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "logo login"
      "search search" !important;
    align-items: center !important;
    column-gap: 8px !important;
    
  }

  body .academy-navigation .academy-navigation-content-wrapper>* {
    min-width: 0 !important;
  }

  body .academy-navigation .academy-navigation-content-wrapper .academy-logo-link,
  body .academy-navigation .academy-navigation-content-wrapper> :has(> .academy-logo-link) {
    grid-area: logo !important;
    justify-self: start !important;
    align-self: center !important;
  }

  body .academy-navigation .academy-navigation-content-wrapper .AL_Custom_NavLoginButton,
  body .academy-navigation .academy-navigation-content-wrapper> :has(> .AL_Custom_NavLoginButton) {
    grid-area: login !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  body .academy-navigation .academy-navigation-content-wrapper [class*="AcademyAvatarWrapper-"],
  body .academy-navigation .academy-navigation-content-wrapper> :has(> [class*="AcademyAvatarWrapper-"]) {
    grid-area: login !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
    translate: 0 -3px;
  }

  body .academy-navigation .academy-navigation-content-wrapper [class*="SearchBarWrapper-"],
  body .academy-navigation .academy-navigation-content-wrapper .AL_Custom_NavSearchBar,
  body .academy-navigation .academy-navigation-content-wrapper> :has(> [class*="SearchBarWrapper-"]),
  body .academy-navigation .academy-navigation-content-wrapper> :has(> .AL_Custom_NavSearchBar) {
    grid-area: search !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

.academy-cards-wrapper.AL_Custom_CardContainer[class*="AcademyThemeCards-"] [class*="StatsWrapper-"] {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

/* Standalone /profile route: injected sidebar + theme accents */
body.BU_ProfileStandalone .BU_ProfileStandaloneSidebar {
  background: rgb(41, 6, 84) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}

body.BU_ProfileStandalone a {
  color: rgb(116, 31, 254) !important;
}

body.BU_ProfileStandalone button[class*="StyledButton-"] {
  border-radius: 8px !important;
}

body.BU_ProfileStandalone button[class*="StyledButton-"]:not([class*="bdDaQv"]) {
  background: rgb(116, 31, 254) !important;
  border-color: rgb(116, 31, 254) !important;
  color: #ffffff !important;
}

body.BU_ProfileStandalone [role="switch"][aria-checked="true"] {
  color: rgb(116, 31, 254) !important;
}

body.BU_ProfileStandalone input:focus,
body.BU_ProfileStandalone input:focus-visible {
  outline: none !important;
  border-color: rgb(116, 31, 254) !important;
  box-shadow: 0 0 0 3px rgba(116, 31, 254, 0.25) !important;
}

@media (min-width: 1025px) {
  body.BU_ProfileStandalone .BU_ProfileStandaloneSidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 85 !important;
    width: 280px !important;
    height: 100vh !important;
    padding: 16px 16px 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.BU_ProfileStandalone [class*="PageFullHeightWrapper-"] {
    margin-top: 0 !important;
    margin-left: 280px !important;
    padding-top: 0 !important;
    width: calc(100% - 280px) !important;
  }

  body.BU_ProfileStandalone [class*="PageFullHeightWrapper-"] [class*="ContentWrapper-"] {
    max-width: 1180px !important;
  }
}

@media (max-width: 1024px) {
  body.BU_ProfileStandalone .BU_ProfileStandaloneSidebar {
    display: none !important;
  }

  body.BU_ProfileStandalone [class*="PageFullHeightWrapper-"] {
    margin-left: 0 !important;
    width: 100% !important;
  }
}