:root {
        --font: Inter;
        --alt-font: Inter;
        --accent-color: #5b4fb5;
        --secondary-color: #00b4a4;
        --link-color: #007a6e;
        --accent-highlight-color: #3f3681;
        --accent-highlight-background-color: #e1dff1;
        --accent-tinted-color-70: #cecae9;
        --accent-tinted-color-80: #dedcf0;
        --accent-tinted-color-90: #efedf8;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #7c73c4;
        --secondary-hover-color: #00e7d2;
        --secondary-contrast-color: #fff;
        --link-hover-color: #00e0ca;
      }
      

.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_v4/v1/course-uploads/610eb2e1-e75e-4493-8680-5539b9ce95e0/k3kvjiocnp29-se1.jpg') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
@import (css) url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap");
/* =========================================================
   CipherUniversity — Site CSS
   Brand system: navy structure · teal + purple action · lavender bands
   Fonts: Inter (body/headings), Merriweather (serif accent)
   ========================================================= */

/*---Fonts---*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,400;1,700&display=swap');

/*---Brand color variables---*/
:root {
  --cu-navy:        #2D2660;
  --cu-navy-deep:   #26215C;
  --cu-teal:        #00B4A4;
  --cu-teal-dark:   #007A6E;
  --cu-purple:      #5B4FB5;
  --cu-purple-deep: #3C3489;
  --cu-amber:       #E8A020;
  --cu-lime:        #9BC53D;
  --cu-lavender:    #EEEDFE;
  --cu-lavender-bg: #F4F2FB;
  --cu-gray:        #888780;
  --cu-border:      #E7E5F2;
}

/*---Global layout (functional — keep)---*/
.layout__content .widget {padding: 0rem; margin:0;}
.home__content .widget {padding: 0rem; margin:0;}
#learner .widget {padding: 0rem; margin:0;}
.container {max-width: 100% !important;}
.pad {padding: 1em 4em !important;}
.padbig {padding: 2em 6em !important;}
.syllabus__section-title-index {display:none;}
.learning-content-hero {max-height: 300px;}
html {scroll-behavior: smooth;}

/*---Base type---*/
body, .home__content, #learner {
  font-family: 'Inter', Arial, sans-serif;
  color: #2C2C2A;
}
.home__content h1, .home__content h2, .home__content h3,
.home__content h4, #learner h2, #learner h3 {
  color: var(--cu-navy);
  font-weight: 600;
}

/* (Global branded background is set via Branding > Background Image — see brand asset) */

/*---Buttons: pill + bold everywhere---*/
.btn, a.btn { border-radius: 24px; font-weight: 600; }

/* =========================================================
   HEADER + NAVIGATION
   ========================================================= */

/*---Top global nav bar → purple---*/
.global-nav__container { max-width: 100%; }

.nav.nav--global-links {
  width: 100%;
  background-color: var(--cu-purple);
  height: 38px;
  display: flex;
  align-items: center;
}
.nav.nav--global-links a {
  color: #ffffff;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .3px;
  opacity: .92;
}
.nav.nav--global-links a:hover { opacity: 1; text-decoration: underline; }

/*---Site header → white---*/
.header.header--microsite, .header.header--article, .header.header--dashboard {
  background-color: #ffffff;
}
.header__inner { padding: 1rem; }

/*---Logo size---*/
.header.header--microsite .header__inner .company__beta-logo .company-logo__container img,
.header.header--dashboard .header__inner .company__beta-logo .company-logo__container img,
.header.header--article .header__inner .company__beta-logo img {
  max-height: 80px;
}

/*---Manager Access / top button → purple pill---*/
.nav--top ul a {
  font-size: 16px;
  text-transform: capitalize;
  background-color: var(--cu-purple);
  color: #ffffff;
  border-radius: 24px;
  padding: 10px 20px;
  font-weight: 600;
}
.nav--top ul a:hover {
  background-color: var(--cu-navy);
  color: #ffffff;
  border-radius: 24px;
  padding: 10px 20px;
}
#cart-button { color: #ffffff; }

/* =========================================================
   HOMEPAGE HERO
   ========================================================= */
.homeheroleft .hero .hero__caption {
  background: transparent;
  text-align: left;
  max-width: 460px;
  left: max(20px, calc((100% - 1080px) / 2 + 20px));
  top: 50%;
  transform: translateY(-50%);
}
.homeheroleft .hero .hero__caption .hero__title,
.homeheroleft .hero__caption h1,
.homeheroleft .hero__caption h2 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 42px !important;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 16px rgba(20,16,50,.55);
}
.homeheroleft .hero .hero__caption .h4 {
  color: #ffffff;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.5;
  margin: .7rem 0 0;
  opacity: .96;
  text-shadow: 0 2px 14px rgba(20,16,50,.55);
}
.homeheroleft .hero__caption a.btn.btn--primary {
  position: static;
  display: inline-block;
  margin-top: 1.75rem;
  border-radius: 24px;
  color: #ffffff;
  background-color: var(--cu-teal);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 28px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,180,164,.35);
}
.homeheroleft .hero__caption a.btn.btn--primary:hover {
  color: var(--cu-teal-dark);
  background-color: #ffffff;
}

/* =========================================================
   DASHBOARD
   ========================================================= */
.ember-view.avatar.print_border-neutral-300 { height: 55px; width: 55px; }
.ember-view.avatar.print_border-neutral-300 img { height: 55px; width: 55px; }
.dashboard-header__name { display:none; }

.dashheroleft .hero .hero__caption {
  background: transparent;
  text-align: left;
  max-width: 560px;
  left: 4em;
  top: 50%;
  transform: translateY(-50%);
}
.dashheroleft .hero .hero__caption .hero__title {
  color: #ffffff;
  font-weight: 700 !important;
  font-size: 52px !important;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 16px rgba(20,16,50,.55);
}
.dashheroleft .hero .hero__caption .h4 {
  color: #ffffff;
  font-weight: 400 !important;
  font-size: 20px !important;
  margin: .7rem 0 0;
  text-shadow: 0 2px 14px rgba(20,16,50,.55);
}
.dashheroleft .hero__caption a.btn.btn--primary {
  position: static;
  display: inline-block;
  margin-top: 1.75rem;
  border-radius: 24px;
  color: #ffffff;
  background-color: var(--cu-teal);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 28px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,180,164,.35);
}
.dashheroleft .hero__caption a.btn.btn--primary:hover {
  color: var(--cu-teal-dark);
  background-color: #ffffff;
}

/*---Dashboard navigation widget---*/
.surface-purple { background-color: var(--cu-purple); }
.two-col.right .roles {
  display: flex;
  gap: .5rem;
  flex-direction: row;
  max-width: 500px;
  flex-wrap: wrap;
}
a.btn.btn--large {
  border: 1.5px solid #ffffff;
  border-radius: 24px;
  color: #ffffff;
  background-color: transparent;
  font-size: 16px;
  padding: 9px 18px;
  text-decoration: none;
}
a.btn.btn--large:hover {
  border-color: #ffffff;
  color: var(--cu-purple);
  background-color: #ffffff;
}

/*---Access widget---*/
.jldash .dashboard-access__header,
.jldash .dashboard-access__header.dashboard-access__header--expanded,
.dashboard-access-tabs.unlist,
.jldash .dashboard-access-tab--inactive {
  background: var(--cu-lavender-bg);
}
.jldash .dashboard-access-tab--active { background-color: #ffffff; }

/* =========================================================
   SECTION BANDS + CARDS
   ========================================================= */

/*---One-column section band → soft lavender---*/
.bland.ember-view.row.widget.widget--one-column.widget--one-column_standard {
  background-color: var(--cu-lavender-bg);
}

/*---Catalog cards → white, rounded, navy titles---*/
.catalog-feature h3 { font-size: 20px; font-weight: 600 !important; color: var(--cu-navy); }
.catalog-feature .catalog-grid-item {
  border-radius: 12px;
  border: 1px solid var(--cu-border);
  background-color: #ffffff;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.catalog-feature .catalog-grid-item:hover {
  box-shadow: 0 6px 18px rgba(45,38,96,.10);
  transform: translateY(-2px);
}
.catalog-feature .catalog-grid-item__description {
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: #ffffff;
}
.catalog-feature .catalog-grid-item__hr { display: none; }
.catalog-feature .catalog-grid-item__cta-container { height: 50px; padding: 25px 10px 0px; }
.catalog-feature .catalog-grid-item__asset { border-radius: 12px 12px 0 0; }

/*---Featured carousel cards---*/
.catalog-feature2 .featured-content-multi-carousel-item__title {
  font-size: 15px; font-weight: 600 !important; color: var(--cu-navy);
  text-align: left; padding-left: 10px;
}
.catalog-feature2 .featured-content-multi-carousel-item__description { text-align: left; }
.catalog-feature2 .featured-content-multi-carousel-item__body {
  border-radius: 12px;
  border: 1px solid var(--cu-border);
  background-color: #ffffff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.catalog-feature2 .featured-content-multi-carousel-item__body:hover {
  box-shadow: 0 6px 18px rgba(45,38,96,.10);
  transform: translateY(-2px);
}
.catalog-feature2 .featured-content-multi-carousel-item__source { text-align: left; padding-left: 10px; }
.catalog-feature2 .featured-content-item__authors { text-align: left; padding-left: 10px; }
.catalog-feature2 .featured-content-multi-carousel {
  border-radius: 12px;
  background-color: transparent;
}

/*---Credly + Discussion widget padding---*/
.widget--credly.widget--credly_standard { padding: 2em 6em !important; }
.ember-view.row.widget.widget--discussion-board.widget--discussion-board_standard { padding: 2em 6em !important; }

/*---Hide support link in course sidebar (fixed quotes so it actually matches)---*/
a.expandable-sidebar__link[href$='/support'] { display: none; }

/* =========================================================
   FAQ / SUPPORT BANNER
   ========================================================= */
.faq_hero {
  background: linear-gradient(rgba(45,38,96,.55), rgba(45,38,96,.55)), url(https://images.unsplash.com/photo-1665789318391-6057c533005e?q=80&w=3732&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  height: 60vh;
  display: flex;
  justify-content: center;
}
.faq-inner {
  text-align: center;
  padding: 0 1.5rem;
  display: flex;
  gap: 1em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.faq-inner h1 { color: #ffffff; margin: 0; }
.faq-inner p  { color: #ffffff; margin: 0; }

/* =========================================================
   BRANDED BACKGROUND — painted onto the content area + body
   (overrides whatever white wrapper was covering it)
   ========================================================= */
html, body, #learner, .layout, .layout__content, .layout__main,
.layout__inner, .home__content, .home, .microsite, .microsite__main,
.microsite__content, .microsite__inner, .l-microsite, .t-content,
.main, .main-content, .content {
  background-color: #F6F4FC !important;
  background-image:
    radial-gradient(1100px 640px at 6% -8%, rgba(91,79,181,0.16), rgba(91,79,181,0) 60%),
    radial-gradient(1000px 720px at 108% 4%, rgba(0,180,164,0.11), rgba(0,180,164,0) 55%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* =========================================================
   SEARCH BAR WIDGET
   ========================================================= */
.search-bar-widget {
  max-width: 1080px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  background: #FFFFFF !important;
  border: 1px solid #E7E5F2 !important;
  border-top: none !important;
  border-radius: 0 0 20px 20px !important;
  padding: 14px 36px 32px !important;
  box-shadow: 0 18px 34px rgba(45,38,96,.08) !important;
}
/* any wrapper around the input must stretch full width */
.search-bar-widget > form,
.search-bar-widget > div,
.search-bar-widget .input-group,
.search-bar-widget .search-bar,
.search-bar-widget form > div {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
}
.search-bar-widget input,
.search-bar-widget .form-control {
  box-sizing: border-box !important;
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  line-height: 58px !important;
  border: 1px solid #DAD7EA !important;
  border-right: none !important;
  border-radius: 999px 0 0 999px !important;
  padding: 0 28px !important;
  font-size: 17px !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 1px 3px rgba(45,38,96,.06) !important;
}
.search-bar-widget button,
.search-bar-widget [type="submit"],
.search-bar-widget .btn {
  box-sizing: border-box !important;
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  align-self: stretch !important;
  background: var(--cu-purple) !important;
  color: #ffffff !important;
  border: 1px solid var(--cu-purple) !important;
  border-radius: 0 999px 999px 0 !important;
  font-weight: 600 !important;
  text-transform: none !important;
  font-size: 17px !important;
  line-height: 1 !important;
  padding: 0 40px !important;
  margin: 0 !important;
}
.search-bar-widget button:hover,
.search-bar-widget .btn:hover { background: var(--cu-purple-deep) !important; }

/* =========================================================
   SITE SUB-NAV (full-width white strip under the header)
   ========================================================= */
#cu-subnav-card {
  width: 100%;
  background: #FFFFFF;
  border-bottom: 1px solid #E7E5F2;
}
#cu-subnav {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 56px;
  padding: 14px 20px 0;
  font-family: 'Inter', Arial, sans-serif;
}
#cu-subnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none !important;
  color: #83838A !important;
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 14px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease;
}
#cu-subnav a svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#cu-subnav a:hover { color: #2D2660 !important; }
#cu-subnav a.cu-active { color: #00B4A4 !important; border-bottom-color: #00B4A4 !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media only screen and (max-width: 600px) {
  .padbig { padding: 1em 1em !important; }
  .homeheroleft .hero .hero__caption .hero__title { font-size: 30px !important; }
  .homeheroleft .hero .hero__caption .h4 { font-size: 17px !important; }
  .dashheroleft .hero .hero__caption .hero__title { font-size: 34px !important; }
}

/* =========================================================
   "WHAT'S NEW" — NATIVE FEATURED CONTENT TILES
   Scoped to [class*="featured-content"] so it ONLY touches
   this widget (never the hidden search preview / catalog).
   ========================================================= */
[class*="featured-content"] .catalog-grid-item {
  border-radius: 14px !important;
  border: 1px solid #E7E5F2 !important;
  background: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(45,38,96,.10) !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
[class*="featured-content"] .catalog-grid-item:hover {
  box-shadow: 0 10px 24px rgba(45,38,96,.15) !important;
  transform: translateY(-3px);
}
[class*="featured-content"] .catalog-grid-item__asset,
[class*="featured-content"] .catalog-grid-item__asset img {
  border-radius: 14px 14px 0 0 !important;
}
[class*="featured-content"] .catalog-grid-item__title {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #2D2660 !important;
  line-height: 1.3 !important;
}
[class*="featured-content"] .catalog-grid-item__cta-container a {
  color: #00B4A4 !important;
  font-weight: 600 !important;
}
/* ============================================================
   NEW & NOTEWORTHY  (.nn-featured)
   Widget CSS-classes field must contain only:  nn-featured
   ============================================================ */

/* Section: flows on the page background, separated by a divider */
.nn-featured.widget--featured-content {
  background: transparent !important;
  margin-bottom: 0 !important;
  padding-top: 56px;
  padding-bottom: 72px;
  font-family: "Inter", sans-serif;
}

.nn-featured > .row {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 48px 20px 0;
  box-sizing: border-box;
  border-top: 1px solid rgba(20, 24, 43, 0.12);
}

/* Alignment: remove TI's extra column gutter so it lines up with Browse */
.nn-featured > .row > .columns,
.nn-featured > .row > [class*="columns"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Eyebrow: chartreuse text + teal hero dot */
.nn-featured .widget__title::before {
  content: "WHAT\2019S NEW";
  display: block;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: #6E6E73;
  padding-left: 18px;
  background: radial-gradient(circle 4px at 4px 55%, #00B4A4 99%, transparent 100%) no-repeat;
  margin-bottom: 4px;
}

/* Header: matches "Find training for what you use" */
.nn-featured .widget__title {
  font-family: "Inter", sans-serif;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #2D2660 !important;
  font-weight: 600 !important;
  font-size: 25px !important;
  margin-bottom: 8px;
}

/* Subtext: full width, customer-facing */
.nn-featured .widget__title::after {
  content: "Be the first to explore our newest product features and releases, plus the latest courses, articles, and resources added across CipherUniversity.";
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: normal;
  color: #5F5E5A;
  margin-bottom: 28px;
}

/* Grid: flush left */
.nn-featured .featured-content-block-grid {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.nn-featured .featured-content-block-grid > li {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
}

/* CARD: the tile element (this is what fixed the gray) */
.nn-featured .featured-content-multi-carousel-item {
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(20, 24, 43, 0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nn-featured .featured-content-multi-carousel-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20, 24, 43, 0.10) !important;
}

/* Image fills the top cleanly */
.nn-featured .featured-content-block-grid img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: top !important;
}
.nn-featured .catalog-grid-item__asset-container {
  background: #ffffff !important;
  padding: 0 !important;
}

/* Card text: matches the Browse cards */
.nn-featured .catalog-grid-item__body {
  text-align: left !important;
}
.nn-featured .catalog-grid-item__title {
  color: #2D2660 !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
}
.nn-featured .catalog-grid-item__source,
.nn-featured .catalog-grid-item__source strong {
  color: #5F5E5A !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Lilac "View Details" button */
.nn-featured .catalog-grid-item__hr {
  display: none !important;
}
.nn-featured .catalog-grid-item__cta-container .btn {
  display: inline-block !important;
  background: #6b5ce0 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
}
.nn-featured .catalog-item:hover .catalog-grid-item__cta-container .btn {
  background: #5a4bd0 !important;
}
/* Continue strip - section framing to match the page */
.cu-continue {
  padding-top: 56px;
  padding-bottom: 16px;
}
.cu-continue .widget__title {
  font-family: "Inter", sans-serif;
  color: #1e2545 !important;
  font-weight: 700;
  font-size: 1.6rem;
}
.cu-continue .widget__title::before {
  content: "\25CF  CONTINUE LEARNING";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #6b7280;
  margin-bottom: 10px;
}
/* Cards - reuse the New & Noteworthy look (white, rounded, soft shadow) */
.cu-continue [class*="catalog-grid-item"],
.cu-continue [class*="carousel-item"] {
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(20, 24, 43, 0.06) !important;
}
/* Progress bar accent in brand teal (selector to confirm from its HTML) */
.cu-continue .progress-bar,
.cu-continue [class*="progress"] {
  background-color: #11b0a0 !important;
}
/* ===== Learner Access ("My Content") widget — class: cu-mylearning ===== */

/* Wrapper stays full-width; spacing only */
.cu-mylearning {
  background: transparent !important;
  font-family: "Inter", sans-serif;
  padding-top: 40px;
  padding-bottom: 24px;
}

/* Center the content to the 1080 container (THIS is the alignment fix) */
.cu-mylearning .dashboard-access {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Kill the gray header band */
.cu-mylearning .dashboard-access__header {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Rename + brand the title */
.cu-mylearning .dashboard-access__header > span {
  font-size: 0 !important;
}
.cu-mylearning .dashboard-access__header > span::after {
  content: "Pick up where you left off!";
  font-family: "Inter", sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: #2D2660;
}

/* Tabs - brand the active state + count badges (now that we have the markup) */
.cu-mylearning .dashboard-access-tab__label {
  color: #6E6E73 !important;
  font-weight: 600 !important;
}
.cu-mylearning .dashboard-access-tab--active .dashboard-access-tab__label,
.cu-mylearning .dashboard-access-tab--current .dashboard-access-tab__label {
  color: #2D2660 !important;
}
.cu-mylearning .dashboard-access-tab--active,
.cu-mylearning .dashboard-access-tab--current {
  border-bottom: 2px solid #6b5ce0 !important;
}
.cu-mylearning .dashboard-access-tab__count {
  background: #EFEEF6 !important;
  color: #5F5E5A !important;
  border-radius: 999px !important;
}
/* ===== My Content widget — tab bar + chrome ===== */

/* Remove the widget's band borders / box */
.cu-mylearning,
.cu-mylearning .dashboard-access,
.cu-mylearning .dashboard-access__header,
.cu-mylearning .dashboard-access__header--expanded {
  border: none !important;
  box-shadow: none !important;
}

/* Tab strip: one clean underline rule, flush left */
.cu-mylearning .dashboard-access-tabs {
  border: none !important;
  border-bottom: 1px solid rgba(20, 24, 43, 0.10) !important;
  box-shadow: none !important;
  margin: 16px 0 0 !important;
  padding-left: 0 !important;
}

/* Tabs */
.cu-mylearning .dashboard-access-tab {
  border: none !important;
}
.cu-mylearning .dashboard-access-tab__label {
  color: #6E6E73 !important;
  font-weight: 600 !important;
}
.cu-mylearning .dashboard-access-tab:hover .dashboard-access-tab__label {
  color: #2D2660 !important;
}
.cu-mylearning .dashboard-access-tab--active .dashboard-access-tab__label,
.cu-mylearning .dashboard-access-tab--current .dashboard-access-tab__label {
  color: #2D2660 !important;
}

/* Count bubbles */
.cu-mylearning .dashboard-access-tab__count {
  background: #EFEEF6 !important;
  color: #5F5E5A !important;
  border-radius: 999px !important;
}
.cu-mylearning .dashboard-access__header > span {
  display: inline-block;
  font-size: 0 !important;
  vertical-align: middle;
}
.cu-mylearning .dashboard-access__header > span::before {
  content: "YOUR LEARNING";
  display: block;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: #6E6E73;
  padding-left: 18px;
  background: radial-gradient(circle 4px at 4px 55%, #00B4A4 99%, transparent 100%) no-repeat;
  margin-bottom: 4px;
}
.cu-mylearning .dashboard-access__header > span::after {
  content: "Pick up where you left off";
  display: block;
  font-size: 25px;
  font-weight: 600;
  color: #2D2660;
}
/* Contain the widget in a branded card so it has presence */
.cu-mylearning .dashboard-access {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 14px rgba(20, 24, 43, 0.06) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 28px 28px 16px !important;
  box-sizing: border-box !important;
}
/* All tabs on one row, packed left */
.cu-mylearning .dashboard-access-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  align-items: center !important;
}
.cu-mylearning .dashboard-access-tab {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.cu-mylearning .dashboard-access-tab > button {
  padding: 10px 12px !important;
}
.cu-mylearning .dashboard-access-tab__label {
  font-size: 14px !important;
}
.cu-mylearning .dashboard-access {
  /* ...all your existing properties... */
  margin: 0 auto 36px !important;   /* was: 0 auto — the 36px adds the gap */
}
/* Header: eyebrow + title on the left, collapse toggle on the right */
.cu-mylearning .dashboard-access__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.cu-mylearning .dashboard-access__header > span {
  order: 1 !important;
}
.cu-mylearning .dashboard-access__header .button-expander {
  order: 2 !important;
  margin: 0 !important;
}
/* All tabs on one row, sized to content, contained in the card */
.cu-mylearning .dashboard-access-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  align-items: center !important;
  width: 100% !important;
  overflow-x: auto !important;        /* safety net: keeps it inside the card */
}
.cu-mylearning .dashboard-access-tab {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;            /* THE fix - removes the forced tab width */
  max-width: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.cu-mylearning .dashboard-access-tab > button {
  padding: 10px 12px !important;
  min-width: 0 !important;
  width: auto !important;
}
.cu-mylearning .dashboard-access-tab__label {
  font-size: 14px !important;
}
/* ===== Sticky footer — keep it pinned to the bottom on short pages ===== */
html, body {
  height: 100%;
  margin: 0;
}

/* Main app wrapper becomes a full-viewport flex column */
.container {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Content area grows to fill the gap, pushing the footer to the bottom */
.container [role="main"],
.container #home-content,
.container .layout__content {
  flex: 1 0 auto !important;
}