@import url("https://fonts.googleapis.com/css?family=PT+Sans:300,400,700");

      :root {
        --font: PT Sans;
        --alt-font: PT Sans;
        --accent-color: #0f3063;
        --secondary-color: #292929;
        --link-color: #0f3063;
        --accent-highlight-color: #0f3063;
        --accent-highlight-background-color: #dde8fa;
        --accent-tinted-color-70: #b7c1d0;
        --accent-tinted-color-80: #cfd6e0;
        --accent-tinted-color-90: #e7eaef;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #16458f;
        --secondary-hover-color: #434343;
        --secondary-contrast-color: #fff;
        --link-hover-color: #1c5bbc;
      }
      
body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1499701412/zazd71fdlwwp9ucucoac.jpg'); background-attachment: fixed; background-size: cover; }
.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/ab8c746f-c25a-4674-ad9c-01c0b63597d4/45zfb9a46lz9-FPS_Compass_white.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* Persistent AI disclaimer box across the widget */
div[role="dialog"][aria-labelledby]::before {
  content: "NOTE: This AI assistant is currently in early stage testing. Please verify important details, as responses may not always be complete or accurate.";
  display: block;
  box-sizing: border-box;
  margin: 10px 12px 0 12px;
  padding: 8px 12px;
  border: 1px solid #cbd5c0;
  border-radius: 6px;
  background: #f6f8f3;
  color: #3f4f36;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  text-align: left;
  z-index: 5;
  width: calc(100% - 24px);
max-width: calc(100% - 24px);
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
flex-shrink: 0;
}

/* Keep the dialog layout clean */
div[role="dialog"][aria-labelledby] {
  overflow: hidden;
}


/* =========================================================
   GLOBAL HIDES / SMALL OVERRIDES
   ========================================================= */

.email-capture {
  display: none !important;
}

.footer__powered-by {
  display: none !important;
}

.enroll__secondary-actions {
  display: none;
}

.dashboard-account-tabs li {
  display: none !important;
}

.dashboard-stat--collaborations {
  display: none !important;
}

.company__school-name {
  color: white !important;
}

.overflow-hidden {
  text-wrap: nowrap !important;
}

/*.font-semibold,
svg:not(:root) {
  color: #fff !important;*/
}

button:hover .font-semibold {
  color: #000 !important;
}

/* Hide cart / sidebar icons */
.article-sidebar__icon.icon-cart {
  display: none !important;
}

/* Hide collaborations tab in learner access widget */
.learner-access-widget .ti-tab.collaborations,
.learner-access-widget .ti-tab[data-tab="collaborations"],
.learner-access-widget a[href*="collaborations"] {
  display: none !important;
}

/* Hide email capture on shared paywall links */
.learner__content .layout-panel .panel .enroll {
  display: none;
}

/* Hide location label */
td:has(> i.icon-location) > strong {
  display: none !important;
}

/* Hide top dashboard panel */
.panorama-dashboard
.large-7.columns
.ember-view:first-child
.panel.panel--container {
  display: none;
}

/* Hide helper text */
.section__body p:has(script[id^="metamorph-103"]) {
  display: none;
}

/* =========================================================
   COURSE DETAIL PAGE
   ========================================================= */

/* Scale down image only on course detail pages */
/* Course detail image: shrink the whole asset block */
.course__detail__content .course__detail__asset {
  max-width: 550px;
  /* adjust this value smaller/bigger as needed */
  /* center it within the row */
}

/* Make the image fill the smaller asset container */
.course__detail__content .course__detail__asset img {
  width: 100% !important;
  /* respect the new smaller max-width */
  height: auto !important;
  display: block;
}

/* =========================================================
   WISTIA / VIDEO
   ========================================================= */

/* Applies ONLY to the widget that you assign this class to */
.wistia-sm-39055848 {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

/* Wistia often injects fixed inline pixel sizes. Override them inside this widget only. */
.wistia-sm-39055848 .video__frame,
.wistia-sm-39055848 [id^="wistia_chrome_"],
.wistia-sm-39055848 [id^="wistia_grid_"] {
  width: 100% !important;
}

/* Keep the player responsive */
.wistia-sm-39055848 [id^="wistia_chrome_"] {
  height: auto !important;
}

/* =========================================================
   DASHBOARD HEADER / ACCOUNT DROPDOWN QUICK FIX
   ========================================================= */

<style>
.dashboard-header-dropdown
  ~ .text-right.hide-for-print {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
}
</style>

/* =========================================================
   BUTTON / AVATAR HOVER
   ========================================================= */

/* default */
button.relative .rounded-full {
  background: #fff;
  /* keeps gray circle */
  color: #333;
  /* normal text */
}

/* hover state */
button.relative:hover .rounded-full {
  background: #0f3063;
  color: #fff;
}

/* =========================================================
   PANORAMA DASHBOARD CARD TEXT REWRITES
   ========================================================= */

/* Only the "Invite and Manage Learners" task card */
.panorama-dashboard .large-7.columns
.panel.panel--container:has(i.icon-users.icon--round)
h4 {
  font-size: 0;
  position: relative;
}

}

.panorama-dashboard .large-7.columns
.panel.panel--container:has(i.icon-users.icon--round)
h4::after {
  content: "Manage Learners";
  font-size: 1.1rem;
  font-weight: 700;
}

/* Target only the "icon-users icon--round" task card subtext */
.panorama-dashboard .large-7.columns
.panel.panel--container:has(i.icon-users.icon--round)
h4 + span {
  --subtext-color: currentColor;
  position: relative;
  display: block;

  /* hide original text without changing font styles */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

/* Replacement text uses the same inherited font sizing/weight/family */
.panorama-dashboard .large-7.columns
.panel.panel--container:has(i.icon-users.icon--round)
h4 + span::after {
  content: "View learners and assign content";
  /* swap this line if you prefer another rewrite */
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 0;
  white-space: normal;
  color: var(--subtext-color);
}

/* Hide original header text */
.panorama-dashboard .large-7.columns
.panel.panel--container:has(i.icon-files.icon--round)
h4 {
  position: relative;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

/* Insert new header text with native styling */
.panorama-dashboard .large-7.columns
.panel.panel--container:has(i.icon-files.icon--round)
h4::after {
  content: "View Available Content";
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 0;
  white-space: normal;
  font-size: inherit;
  font-weight: 700;
  color: inherit;
}

/* =========================================================
   MANAGER DASHBOARD WELCOME
   ========================================================= */

/* Scope to manager dashboard header only */
.manager-dashboard__header
.dashboard__welcome-message h1 {
  position: relative;
  overflow: hidden;

  /* push original content (including emoji) off screen */
  text-indent: -9999px;
  white-space: nowrap;
}

/* Insert replacement heading */
.manager-dashboard__header
.dashboard__welcome-message h1::after {
  content: "Manage learners, content, and reporting here.";
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 0;
  white-space: normal;
  font-size: 1.2rem;
  /* matches native h1 size */
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
}

/* =========================================================
   READ-ONLY / ADMIN FORM MESSAGES
   ========================================================= */

/* Show a "read-only" message banner on this specific user details form */
.section__body.clearfix form.form--admin:has(input#tele) {
  position: relative;
  padding-top: 56px;
  /* space for banner */
}

.section__body.clearfix form.form--admin:has(input#tele)::before {
  content: "User information can’t be edited here. Any changes you make will not save. Please contact us to update user details.";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #f6f6f6;
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
}

/* Target only the FIRST status assignment panel */
.panel.panel--alt:first-of-type {
  position: relative;
}

/* Hide the original helper text only in the first panel */
.panel.panel--alt:first-of-type > p {
  display: none;
}

/* Insert replacement note only in the first panel */
/*
.panel.panel--alt:first-of-type::before {
  content: "Note: This section is for assigning content only. Changes to content status will not be saved.";
  display: block;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #f6f6f6;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
}
*/

}

/* =========================================================
   SIMPLE NAVBAR STYLES
   ========================================================= */

.custom-navbar-simple {
  background-color: #87212e;
  padding: 10px 10px !important;
  border-radius: 6px;
  /* slight rounding for local style */
}

.custom-navbar-simple .navigation-bar ul li a {
  color: black !important;
  font-family: "Oxygen", sans-serif;
  font-size: 15px;
  text-decoration: none;
  padding: 8px 12px;
  display: inline-block;
}

.custom-navbar-simple .navigation-bar ul li a:hover {
  background-color: #fdd920;
  /* FPS yellow highlight */
  color: ##87212e !important;
  border-radius: 4px;
}

/* DEMO NAV BAR */
.custom-navbar-simpledemo {
  background-color: #0f3063;
  padding: 10px 10px !important;
  border-radius: 6px;
  /* slight rounding for local style */
}

.custom-navbar-simpledemo .navigation-bar ul li a {
  color: black !important;
  font-family: "Oxygen", sans-serif;
  font-size: 15px;
  text-decoration: none;
  padding: 8px 12px;
  display: inline-block;
}

.custom-navbar-simpledemo .navigation-bar ul li a:hover {
  background-color: #fdd920;
  /* FPS yellow highlight */
  color: ##87212e !important;
  border-radius: 4px;
}

/* CALENDAR NAV BAR */
.custom-navbar-simplecalendar {
  background-color: #fff;
  padding: 10px 10px !important;
  border-radius: 6px;
  margin-top: -20px !important;
  margin-bottom: -30px !important;
  /* slight rounding for local style */
}

.custom-navbar-simplecalendar .navigation-bar ul li a {
  color: #0f3063 !important;
  font-family: "PT Sans", sans-serif;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  padding: 10px 13px !important;
  margin-bottom: 8px;
  display: inline-block;
  position: relative !important;
  gap: 1px !important;
  border: 2px solid transparent !important;
  /* Initial transparent border */
  *transition: border-color 0.3s ease !important;
  display: flex !important;
}

.custom-navbar-simplecalendar .dropdown ul li a:focus {
  position: relative !important;
  z-index: 111 !important;
}

.custom-navbar-simplecalendar .navigation-bar ul li a:hover {
  color: #0f3063 !important;
  border-radius: 6px;
  background: #fff !important;
  /* darker FPS blue on hover */
  border-color: #0f3063 !important;
  border-width: 2px !important;
  border-bottom: 2px solid transparent;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.18);
  outline: none;
}

/* HELP CENTER NAVBAR */
.custom-navbar-simplehelpcenter {
  background-color: #fff;
  padding: 10px 10px !important;
  border-radius: 6px;
  margin-top: -2px !important;
  margin-bottom: -30px !important;
  /* slight rounding for local style */
}

.custom-navbar-simplehelpcenter .navigation-bar ul li a {
  color: black !important;
  font-family: "PT Sans", sans-serif;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  padding: 10px 13px !important;
  margin-bottom: 8px;
  display: inline-block;
  position: relative !important;
  gap: 1px !important;
  border: 2px solid transparent !important;
  /* Initial transparent border */
  *transition: border-color 0.3s ease !important;
  display: flex !important;
}

.custom-navbar-simplehelpcenter .dropdown ul li a:focus {
  position: relative !important;
  z-index: 111 !important;
}

.custom-navbar-simplehelpcenter .navigation-bar ul li a:hover {
  color: #fff !important;
  border-radius: 6px;
  background: #B5A898 !important;
  /* darker FPS blue on hover */
  border-color: #B5A898 !important;
  border-width: 2px !important;
  border-bottom: 2px solid transparent;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.18);
  outline: none;
}

/* =========================================================
   NOT FOUND / SIDEBAR DOWNLOAD PANEL
   ========================================================= */

/* =========================
   Not Found Container Styling
   ========================= */
.not-found__container {
  background-color: #0f3063;
  /* FPS official blue */
  color: #ffffff;
  /* White text */
  text-align: center;
  padding: 40px 20px;
  border-radius: 8px;
  font-family: "PT Sans", Arial, sans-serif;
}

/* Make headings and text white */
.not-found__container h3,
.not-found__container p,
.not-found__container span {
  color: #ffffff;
}

/* Restrict button styling only inside this container */
.not-found__container .btn--alt.btn--primary {
  background-color: #ffffff;
  /* White button */
  color: #0f3063;
  /* Blue text */
  border: 2px solid #ffffff;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* Hover effect */
.not-found__container .btn--alt.btn--primary:hover {
  background-color: #0f3063;
  /* Blue background */
  color: #ffffff;
  /* White text */
  border-color: #ffffff;
}

/* Style the sidebar panel */
.panel.panel--alt.panel--article-sidebar {
  background-color: #0f3063 !important;
  /* company blue background */
  padding: 20px;
  border-radius: 6px;
  text-align: center;
  /* fallback centering */
}

/* Reset column width and center contents */
.panel--article-sidebar .columns.small-10 {
  width: 100% !important;
  /* take full width */
  flex: none !important;
  /* ignore grid behavior */
  text-align: center !important;
  /* center the link */
}

/* Panel background */
.panel.panel--alt.panel--article-sidebar {
  background-color: #0f3063 !important;
  /* company blue */
  padding: 16px;
  border-radius: 6px;
  text-align: center;
}

/* Row alignment */
.panel--article-sidebar .row.collapse {
  display: flex !important;
  align-items: center !important;
  /* vertical alignment */
  justify-content: center !important;
}

/* Icon styling (tighter next to text) */
.panel--article-sidebar .article-sidebar__icon.icon-file {
  font-size: 24px !important;
  /* a bit smaller to balance text */
  color: #ffffff !important;
  margin-right: -8px;
  /* small space before text */
  line-height: 1;
}

/* Download link */
.panel--article-sidebar .btn.btn--link {
  color: #ffffff !important;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none !important;
  display: inline-flex;
  /* keeps icon + text inline */
  align-items: center;
  /* vertically aligns both */
}

/* Style the link */
.panel--article-sidebar .btn.btn--link {
  color: #ffffff !important;
  /* white text */
  font-weight: bold;
  text-decoration: none !important;
  font-size: 16px;
  display: inline-block;
  padding: 8px 16px;
}

columns small-2 {
  display: none !important;
}

/* =========================================================
   CALENDAR VIEW
   ========================================================= */

/* Testing Calendar View */
.event-schedule table tbody tr:first-child td {
  background-color: #290936 !important;
  color: #fff;
}

.ember-view row widget widget--one-column widget--one-column_standard {
  padding: 5px !important;
}

.event-schedule table td {
  background-color: #f3f3f3;
  padding: 12px 8px;
  text-align: center;
  font-weight: bold;
  color: #888;
  font-size: 14px;
}

.event-schedule table td.active {
  padding: 0;
  background-color: #eaeaea;
  -webkit-transition: all 150ms;
  -moz-transition: all 150ms;
  -ms-transition: all 150ms;
  -o-transition: all 150ms;
  transition: all 150ms;
}

/* =========================================================
   FEATURED CONTENT CAROUSEL, CTA BUTTONS
   ========================================================= */

/* Custom Class to Center Featured Content Carousel Items */
/* Compact carousel styling - targeting exact structure */
.featured-content-multi-carousel.ti-center-carousel .featured-content-block-grid {
  display: flex !important;
  justify-content: center !important;
  padding-top: 2px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.featured-content-multi-carousel.ti-center-carousel .featured-content-block-grid > li {
  width: fit-content !important;
  margin: 0 1px !important;
}

.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item {
  background: transparent !important;
  background-color: #0f3063 !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: transform 0.12s ease, box-shadow 0.2s ease !important;
  border: 1px solid #0f3063 !important;
  margin: 0 !important;
}

.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item:hover,
.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item:focus-within {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item__body {
  letter-spacing: 0.5px !important;
  padding: 6px 14px 8px !important;
  margin: 0 !important;
}

.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item__title {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  letter-spacing: 0.6px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Hide/minimize the empty source element */
.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item__source {
  display: none !important;
}

/* Target any other potential spacing elements */
.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item__body > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile - extra compact */
@media (max-width: 480px) {
  .featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item__body {
    padding: 6px 12px 8px !important;
  }

  .featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item__title {
    font-size: 1.1rem !important;
  }
}

/* === CTA Buttons === */

/* Primary Button */
.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn {
  display: inline-block;
  margin-top: 10px;

  /* Typography */
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  text-decoration: none;

  /* Styling */
  background: #0083bf;
  color: #fff;
  border: 2px solid #0083bf;
  border-radius: 9999px;
  padding: 10px 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

  /* Animation */
  transition:
    transform 0.08s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn:hover,
.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn:focus {
  background: #006a9a;
  border-color: #006a9a;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  outline: none;
}

.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Secondary Button */
.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn--outline {
  display: inline-block;
  margin-top: 10px;

  /* Typography */
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  text-decoration: none;

  /* Styling */
  background: transparent;
  color: #0083bf;
  border: 2px solid #0083bf;
  border-radius: 9999px;
  padding: 9px 15px;

  /* Animation */
  transition:
    transform 0.08s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn--outline:hover,
.featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn--outline:focus {
  background: #0083bf;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  outline: none;
}

/* === Mobile Responsive === */
@media (max-width: 480px) {
  .featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item__body {
    padding: 10px 12px 14px;
  }

  .featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn,
  .featured-content-multi-carousel.ti-center-carousel .featured-content-multi-carousel-item a.ti-fps-btn--outline {
    font-size: 13.5px;
    padding: 9px 14px;
  }
}

}

/* =========================================================
   MICROSITE HEADER / CATALOG PAGE
   ========================================================= */

/* TESTING BELOW */

/* Simple Thought Industries Catalog Styling */
/* Company Color: #0f3063 */

/* Microsite (catalog) header */
.header.header--microsite,
.header.header--microsite * {
  background-color: #0f3063 !important;
  border: none !important;
}

/* ==================== HEADER LAYOUT ==================== */
.header.header--microsite .header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 85px !important;
  /* breathing room */
  padding: 0 20px !important;
  box-sizing: border-box !important;
  background-color: #0f3063 !important;
}

/* ==================== LOGO (left) ==================== */
.header.header--microsite .company__beta-logo {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 75px !important;
  height: 75px !important;
  flex-shrink: 0 !important;
  margin-right: 30px !important;
  margin-top: -32px !important;
  /* move upward */
}

.header.header--microsite .company-logo__container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.header.header--microsite .company-logo__tagline {
  position: absolute !important;
  left: 135px !important;
  top: 42% !important;
  transform: translateY(-50%) !important;
  font-family: 'PT Sans', Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  text-transform: capitalize !important;
  z-index: 10 !important;
  font-weight: bold;
}

/* Blue header only */
.catalog-header span {
  color: white !important;
}

/* Floating search/filter bar */
.catalog-search-bar,
.catalog-filters {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  position: relative !important;
  margin-top: -40px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Floating style for search input */
/* Style ONLY inputs inside the catalog widget */
.catalog-filters .ember-text-field,
.catalog-filters input.form-control,
.catalog-filters select.form-control {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  padding-right: 40px !important;
  padding-left: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
}

.catalog-filters .ember-text-field:focus,
.catalog-filters input.form-control:focus {
  box-shadow: 0 6px 20px rgba(15, 48, 99, 0.2) !important;
  /* transform: translateY(-2px) !important; */
  outline: none !important;
}

/* Floating style for dropdowns */
.catalog-filters select#content-type-options,
.catalog-filters select#sort-options,
.catalog-filters .catalog-filters__select {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  padding: 12px 16px !important;
  background-color: white !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
}

.catalog-filters select#content-type-options:hover,
.catalog-filters select#sort-options:hover,
.catalog-filters .catalog-filters__select:hover {
  box-shadow: 0 6px 20px rgba(15, 48, 99, 0.15) !important;
  transform: translateY(-2px) !important;
}

.catalog-display-type {
  white-space: normal !important;
}

/* Floating style for view toggle buttons */
.catalog-display-type button {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  padding: 12px !important;
  background-color: white !important;
  transition: all 0.2s ease !important;
  margin: 0 4px !important;
}

.catalog-display-type button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

.catalog-display-type button[aria-selected="true"] {
  background-color: #0f3063 !important;
  color: white !important;
  box-shadow: 0 6px 20px rgba(15, 48, 99, 0.3) !important;
}

/* Style dropdown options */
.catalog-filters select#content-type-options option,
.catalog-filters select#sort-options option,
.catalog-filters .catalog-filters__select option {
  padding: 12px 16px !important;
  font-size: 15px !important;
  background-color: white !important;
  color: #333 !important;
  border-radius: 8px !important;
  border: none !important;
}

.catalog-filters select#content-type-options option:hover,
.catalog-filters select#sort-options option:hover,
.catalog-filters .catalog-filters__select option:hover {
  background-color: rgba(15, 48, 99, 0.1) !important;
  color: #0f3063 !important;
}

.catalog-filters select#content-type-options option:checked,
.catalog-filters select#sort-options option:checked,
.catalog-filters .catalog-filters__select option:checked {
  background-color: #0f3063 !important;
  color: white !important;
}

/* Style the search button to match floating theme */
.catalog-search__button {
  /* border-radius: 8px !important; */
  border: none !important;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; */
  /* padding: 12px !important; */
  background-color: transparent !important;
  color: #666 !important;
  transition: all 0.2s ease !important;
  margin-left: 8px !important;
  justify-content: center !important;
  margin-left: 15px;
  margin-right: 13px;
  padding: 5px;
}

.icon-search {
  margin-bottom: 40px !important;
  padding: 0px;
}

.catalog-search__button i:hover {
  background-color: transparent !important;
  color: #0f3063 !important;
  transform: translateY(-2px) !important;
  /* box-shadow: 0 6px 20px rgba(15, 48, 99, 0.3) !important; */
  background: none !important;
}

}

/* Course cards with rounded corners */
.catalog-grid-item {
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease !important;
  border: 2px solid transparent !important;
  margin-top: 2px !important;
}

.catalog-grid-item:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border: 2px solid #0f3063 !important;
  z-index: 15;
}

/* Sidebar larger sizing and blue text */
.catalog-aggregation,
div[class*="aggregation"] {
  border-radius: 12px !important;
  padding: 20px !important;
  margin: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(15, 48, 99, 0.1) !important;
  width: auto !important;
  min-width: 280px !important;
  overflow: visible !important;
  background-color: white !important;
}

/* Blue bold text for sidebar headers - target more specifically */
.catalog-aggregation__header--label,
.column.small-11 .catalog-aggregation__header--label,
.column.small-11 span,
span.catalog-aggregation__header--label {
  color: #0f3063 !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

/* Style the course action buttons */
.btn--primary,
span.btn--primary {
  color: #0f3063 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  border: 2px solid #0f3063 !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
  text-wrap: nowrap;
}

.btn--primary:hover,
span.btn--primary:hover {
  background-color: #0f3063 !important;
  color: white !important;
}

.btn.unregister {
  margin-left: 1rem;
}

.btn.unregistered {
  color: green !important;
  border-color: transparent !important;
  background-color: transparent !important;
  pointer-events: none;
}

/* Style the sidebar category buttons */
.catalog-aggregation__value,
button.catalog-aggregation__value {
  color: #0f3063 !important;
  font-weight: 500 !important;
  text-align: left !important;
  padding: 8px 12px !important;
  margin: 2px 0 !important;
  border-radius: 4px !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.catalog-aggregation__value:hover,
button.catalog-aggregation__value:hover {
  background-color: rgba(15, 48, 99, 0.1) !important;
  color: #0f3063 !important;
}

/* Course Titles */
.catalog-grid-item__title {
  color: #0f3063 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.catalog-list-item__title {
  color: #0f3063 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 6px 16px 6px 12px;
}

/* Access Dates CTAs */
.catalog-grid-item__text-cta,
.catalog-list-item__text-cta {
  color: #656565 !important;
  font-weight: bold;
  font-size: 14px;
}

.catalog-list-item__info {
  color: black;
  weight: bold;
}

.ember-view catalog-list-item {
}

/* Style the count numbers in blue - try multiple selectors */
.catalog-aggregation__count,
span.catalog-aggregation__count,
.catalog-aggregation__value .catalog-aggregation__count,
button.catalog-aggregation__value span {
  color: #0f3063 !important;
  font-weight: 400 !important;
}

/* Ribbon styling to work with existing card styling */
ember-view catalog-grid-item__asset,
.catalog__ribbon.catalog__ribbon--attached {
  position: absolute !important;
  top: 12px !important;
  right: -8px !important;
  z-index: 10 !important;
  padding: 6px 16px 6px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px 0 0 4px !important;
  transform: none !important;
  transition: all 0.2s ease !important;
}

catalog-list-item__cta-container {
  position: absolute;
  top:;
}

/* Ensure the ribbon corner displays properly */
.catalog__ribbon-corner {
  position: absolute !important;
  bottom: -6px !important;
  right: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 6px 6px 0 0 !important;
  z-index: 9 !important;
}

/* Make sure parent card has relative positioning for ribbon placement */
.catalog-grid-item,
.catalog-list-item {
  position: relative !important;
  overflow: visible !important;
  /* Override the hidden to show ribbon */
}

/* Adjust card hover state to work with ribbon */
.catalog-grid-item:hover .catalog__ribbon.catalog__ribbon--attached {
  transform: translateX(2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure ribbon text is readable */
.catalog__ribbon.catalog__ribbon--attached {
}

/* Optional: Add a subtle animation when cards are hovered */
@keyframes ribbonPulse {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

.catalog-grid-item:hover .catalog__ribbon.catalog__ribbon--attached {
  animation: ribbonPulse 0.3s ease-in-out !important;
}

/* LEARNER ACCESS TABS */
.

/* =========================================================
   DASHBOARD ACCESS WIDGET
   ========================================================= */

/* Dashboard Widget Styling - Simple & Clean */
/* Company Color: #0f3063 */

/* Clean dashboard container - preserve collapse functionality */
.dashboard-access {
  background-color: white !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  border: none !important;
  /* Preserve collapse/expand states */
  transition: height 0.3s ease, opacity 0.3s ease !important;
}

/* Ensure widget is visible when expanded */
.dashboard-access:not(.collapsed) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Support for collapsed state if it exists */
.dashboard-access.collapsed {
  overflow: hidden !important;
}

/* Dashboard header styling */
.dashboard-access__header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #f0f0f0 !important;
}

.dashboard-access__header--expanded {
  border-bottom-color: rgba(15, 48, 99, 0.1) !important;
}

/* Header title */
.dashboard-access__header span {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #0f3063 !important;
  flex: 1 !important;
}

/* Collapse/expand button */
.dashboard-access__header .button-expander {
  background-color: transparent !important;
  border: 1px solid rgba(15, 48, 99, 0.2) !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  color: #0f3063 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  font-size: 14px !important;
  min-width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dashboard-access__header .button-expander:hover {
  background-color: #0f3063 !important;
  color: white !important;
  border-color: #0f3063 !important;
}

/* Icon styling */
.dashboard-access__header .button-expander i {
  font-size: 12px !important;
  color: inherit !important;
}

/* Don't interfere with collapse controls */
.dashboard-access .widget-header,
.dashboard-access .widget-title,
.dashboard-access .widget-controls,
.dashboard-access .collapse-toggle,
.dashboard-access .expand-toggle,
.dashboard-access .button-expander {
  position: relative !important;
  z-index: 10 !important;
}

/* Simple tab layout */
.dashboard-access-tabs {
  display: flex !important;
  gap: 4px !important;
  justify-content: center !important;
  margin-bottom: 15px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Clean tab buttons */
.dashboard-access-tab button {
  background-color: #f8f9fa !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  height: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  flex: 1 !important;
  min-width: 30px !important;
  cursor: pointer !important;
}

/* Hover effects */
.dashboard-access-tab button:hover {
  background-color: #e9ecef !important;
  border-color: #0f3063 !important;
  transform: translateY(-1px) !important;
}

/* Active tab - blue theme */
.dashboard-access-tab--active button {
  background-color: #0f3063 !important;
  border-color: #0f3063 !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

/* Active tab hover */
.dashboard-access-tab--active button:hover {
  background-color: #1a4077 !important;
  transform: translateY(-2px) !important;
}

/* Tab labels */
button[role="tab"] .dashboard-access-tab__label {
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #333 !important;
  display: block !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
}

button[role="tab"][aria-selected="true"] .dashboard-access-tab__label {
  color: white !important;
}

/* Tab counts - force visibility with very specific targeting */
button[role="tab"] .dashboard-access-tab__count,
button[role="tab"] span.dashboard-access-tab__count {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #0f3063 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  position: relative !important;
  z-index: 10 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
}

/* Make count larger when active - with all overrides */
/* Force all content in active buttons to be visible and white */
button[role="tab"][aria-selected="true"] {
  color: white !important;
}

button[role="tab"][aria-selected="true"] * {
  visibility: visible !important;
  opacity: 1 !important;
  color: white !important;
}

/* Extra specific targeting for active tab counts */
.dashboard-access-tab--active button .dashboard-access-tab__count,
.dashboard-access-tab--active button span.dashboard-access-tab__count,
.dashboard-access-tab--active .dashboard-access-tab__count,
.dashboard-access-tab--active span.dashboard-access-tab__count {
  color: white !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   DASHBOARD STATS WIDGET
   ========================================================= */

/* Dashboard Stats Widget Styling */
/* Company Color: #0f3063 */

/* Main stats container - floating style to match tabs */
.dashboard-stats__container {
  background-color: white !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  border: none !important;
}

/* Stats list layout - horizontal arrangement */
.dashboard-stats {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Individual stat cards - static display styling */
.dashboard-stats li {
  margin: 0 !important;
  flex: 1 !important;
}

.dashboard-stat {
  background-color: white !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  padding: 24px 32px !important;
  min-height: 100px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Remove hover effect - static display only */
.dashboard-stat:hover {
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border-color: #e5e5e5 !important;
}

/* Stat labels - blue text like tabs */
.dashboard-stat__label {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #0f3063 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Icons styling */
.dashboard-stat__icon {
  font-size: 16px !important;
  color: #0f3063 !important;
  margin-bottom: 4px !important;
}

/* Stat values - keep original colors but make prominent */
.dashboard-stat__value {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Preserve original colors for different stat types */
.dashboard-stat--available .dashboard-stat__value {
  color: #17a2b8 !important;
}

.dashboard-stat--started .dashboard-stat__value {
  color: #28a745 !important;
}

.dashboard-stat--completed .dashboard-stat__value {
  color: #dc3545 !important;
}

.dashboard-stat--certificates .dashboard-stat__value {
  color: #fd7e14 !important;
}

.dashboard-stat--collaborations .dashboard-stat__value {
  color: #6f42c1 !important;
}

/* Move dashboard stats closer to top of page */

/* Reduce spacing above dashboard stats container */
.dashboard-stats__container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce spacing on the parent column */
.small-12.columns:has(.dashboard-stats__container) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If there's a row wrapper above it, reduce that spacing too */
.row:has(.dashboard-stats__container) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Target any widget or container that might be pushing it down */
.widget:has(.dashboard-stats__container),
.widget--dashboard-stats {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Reduce spacing between navigation/header and stats */
.dashboard-stats {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If there are any spacer elements above, minimize them */
.dashboard-stats__container::before,
.dashboard-stats::before {
  display: none !important;
}

/* Additional safety - target any potential spacing elements */
.ember-view:has(.dashboard-stats__container) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .dashboard-stats__container,
  .small-12.columns:has(.dashboard-stats__container),
  .row:has(.dashboard-stats__container) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* =========================================================
   FEATURED CONTENT WIDGET
   ========================================================= */

/* Featured Content Carousel Styling - Blue Theme */
/* Company Color: #0f3063 */

/* Hide completely when empty - check for empty ul or no catalog-item children */
.widget--featured-content:has(.featured-content-block-grid:empty),
.widget--featured-content:has(.featured-content-block-grid:not(:has(.catalog-item))),
.featured-content-multi-carousel:has(ul:empty),
.featured-content-multi-carousel:has(ul:not(:has(.catalog-item))) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Fallback for older browsers - hide if no content */
.widget--featured-content .featured-content-block-grid:empty,
.featured-content-block-grid:not(:has(li)) {
  display: none !important;
}

.widget--featured-content:not(:has(.catalog-item)) {
  display: none !important;
}

/* Main carousel container - completely invisible background */
.widget--featured-content:has(.catalog-item) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Carousel wrapper */
.featured-content-multi-carousel {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Block grid list - tighter spacing */
.featured-content-block-grid {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 8px !important;
}

/* Individual carousel item - keep visible styling */
.catalog-item {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  background-color: #f8f9fa !important;
  border: 1px solid #e5e5e5 !important;
  overflow: hidden !important;
}

/* Carousel item container */
.featured-content-multi-carousel-item {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Item body - much more compact */
.featured-content-multi-carousel-item__body {
  padding: 8px 12px 10px !important;
  background-color: #0f3063 !important;
}

/* Item title - compact spacing */
.featured-content-multi-carousel-item__title {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

.catalog-item:hover .featured-content-multi-carousel-item__title {
  color: #fff !important;
}

/* Item source - hide to save space */
.featured-content-multi-carousel-item__source {
  display: none !important;
}

/* Make sure links don't override styling */
a.catalog-item,
a.catalog-item:link,
a.catalog-item:visited {
  text-decoration: none !important;
  color: inherit !important;
}

a.catalog-item:hover,
a.catalog-item:focus {
  text-decoration: none !important;
  color: inherit !important;
}

/* Mobile responsive - completely transparent */
@media (max-width: 768px) {
  .widget--featured-content:has(.catalog-item) {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .featured-content-block-grid {
    gap: 6px !important;
  }

  .featured-content-multi-carousel-item__body {
    padding: 6px 10px 8px !important;
  }

  .featured-content-multi-carousel-item__title {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .widget--featured-content:has(.catalog-item) {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .featured-content-block-grid {
    gap: 4px !important;
  }

  .featured-content-multi-carousel-item__body {
    padding: 4px 8px 6px !important;
  }

  .featured-content-multi-carousel-item__title {
    font-size: 14px !important;
  }
}

/* =========================================================
   MICROSITE HEADER NAV / UTILITY
   ========================================================= */

/* ==================== UTILITY NAV (right) ==================== */
.header.header--microsite .nav.nav--top {
  order: 3 !important;
  margin-left: auto !important;
}

.header.header--microsite .nav.nav--top a,
.header.header--microsite .nav.nav--top button {
  font-family: 'PT Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 10px !important;
  margin-top: -15px !important;
  justify-content: right !important
  /* move upward */
}

.header.header--microsite .nav.nav--top a:hover,
.header.header--microsite .nav.nav--top button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.header.header--microsite .top-bar-section .left {
  display: flex !important;
  flex-wrap: nowrap !important;
  /* don’t allow wrapping */
  justify-content: right !important;
  flex: 1 1 auto !important;
  /* allow items to shrink evenly */
}

.header.header--microsite .top-bar-section .left a {
  flex: 1 1 auto !important;
  /* stretch/squeeze evenly */
  text-align: center !important;
}

/* Ensure Manager Access link shrinks with screen size too */
.header.header--microsite .nav.nav--top a {
  font-size: clamp(12px, 1vw + 0.25rem, 15px) !important;
  text-align: right !important;
}

/* Put logo | (center nav) | (utility) on one flex row with no column gap */
.header.header--microsite .header__inner {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  column-gap: 0 !important;
  /* kill any grid gap */
}

/* Make the center nav content-width (not greedy), so utility can sit tight to it */
.header.header--microsite .top-bar {
  flex: 0 1 auto !important;
  /* don't stretch across leftover space */
  margin-right: 0 !important;
  padding-right: 0 !important;
  min-width: 0 !important;
}

/* Utility (Manager Access) sits immediately to the right of the center nav */
.header.header--microsite .nav.nav--top {
  flex: 0 1 auto !important;
  /* content width; allow slight shrink */
  /* margin-left: 0 !important; */
  padding-left: 0 !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* If Foundation added gutters on the column wrappers, neutralize them */
.header.header--microsite .top-bar.columns,
.header.header--microsite .nav.nav--top.columns {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bring the last center-nav link and Manager link as close as possible */
.header.header--microsite .top-bar-section ul.left > li:last-child > a {
  padding-right: 6px !important;
  /* tighter right edge on last nav item */
}

.header.header--microsite .nav.nav--top a {
  padding-left: 6px !important;
  /* tighter left edge on Manager Access */
}

/* Extra squeeze on smaller screens */

}

/* Pack the last center-nav item and Manager Access flush together */
.header.header--microsite .top-bar-section ul.left {
  gap: 0 !important;
}

.header.header--microsite .top-bar-section ul.left > li {
  margin: 0 !important;
  padding: 0 !important;
}

.header.header--microsite .top-bar-section ul.left > li:last-child > a {
  padding-right: 0 !important;
  margin-right: 0 !important;
  border-right: 0 !important;
}

/* Utility (Manager Access) – kill all left spacing */
.header.header--microsite .nav.nav--top {
  /* margin-left: 0 !important; */
  padding-left: 0 !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 2;
}

.header.header--microsite .nav.nav--top a {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: 0 !important;
}

/* Remove column gutters if Foundation injected them */
.header.header--microsite .top-bar.columns,
.header.header--microsite .nav.nav--top.columns {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* FINAL squeeze: close any hidden gutter between the two blocks */
.header.header--microsite .top-bar + .nav.nav--top {
  margin-left: -6px !important;
  /* bring even closer; tweak if needed */
}

/* =========================================================
   DASHBOARD HEADER
   ========================================================= */

/* ==================== DASHBOARD HEADER BACKGROUND ==================== */
/*************************************************************
 DASHBOARD HEADER (BLUE BAR, LOGO, UTILITY, USER)
*************************************************************/

/* Blue header bar (don’t paint every child blue) */
{}
.header.header--dashboard {
  background-color: #0f3063 !important;
  position: relative !important;
  /* for dropdown stacking */
  z-index: 100 !important;
}

.header.header--dashboard .header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 90px !important;
  /* header height */
  padding: 0 30px !important;
  box-sizing: border-box !important;
  background-color: #0f3063 !important;
}

/* ---------- Logo (left) ---------- */
.header.header--dashboard .company__beta-logo {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 350px !important;
  height: 350px !important;
  flex-shrink: 0 !important;
  margin-right: 30px !important;
  margin-top: -17px !important;
  /* nudge up to align with links */
}

.header.header--dashboard .company-logo__container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ---------- Utility (Manager Access / Cart → right) ---------- */
.header.header--dashboard .nav.nav--top {
  order: 3 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}

.header.header--dashboard .nav.nav--top ul {
  display: flex !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.header.header--dashboard .nav.nav--top a,
.header.header--dashboard .nav.nav--top button {
  font-family: 'PT Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 10px !important;
  margin-top: -12px !important;
  /* vertical align */
}

.header.header--dashboard .nav.nav--top a:hover,
.header.header--dashboard .nav.nav--top button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* ---------- User name + avatar ---------- */
.header.header--dashboard .dashboard-header__name {
  font-family: 'PT Sans', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  position: relative !important;
  top: -7px !important;
  /* lift name slightly */
  margin: 0 !important;
}

.header.header--dashboard .dashboard-header-dropdown__link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 15px !important;
  margin-left: auto !important;
}

.header.header--dashboard .dashboard-header-dropdown__link .row.collapse {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin: 2 !important;
}

.header.header--dashboard .dashboard-header-dropdown__link .small-10.columns,
.header.header--dashboard .dashboard-header-dropdown__link .small-2.columns {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.header.header--dashboard .dashboard-header__avatar__container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 10px !important;
}

/* Avatar visuals */
.header.header--dashboard .avatar.avatar--initials {
  background: #ffffff !important;
  color: #0f3063 !important;
  border: none !important;
}

/* Dropdown (blue with white links, above header) */
.header.header--dashboard .dashboard-header-dropdown {
  position: absolute !important;
  right: 30px !important;
  top: calc(100% - 6px) !important;
  z-index: 2000 !important;
  background: #0f3063 !important;
  border: 1px solid #0a2549 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.header.header--dashboard .dashboard-header-dropdown a {
  display: block !important;
  padding: 10px 14px !important;
  color: #000000 !important;
  font-weight: 600 !important;
  font-family: 'PT Sans', Arial, sans-serif !important;
  text-decoration: none !important;
  background: transparent !important;
}

.header.header--dashboard .dashboard-header-dropdown a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: black !important;
}

.header.header--dashboard .dashboard-header-dropdown a:hover {
  background: #0f3063 !important;
  color: #ffffff !important;
}

/*************************************************************

}/* Keep the whole user block pinned to the right */
.header.header--dashboard .dashboard-header-dropdown__link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  /* ✅ anchor to right */
  gap: 6px !important;
  /* small gap between name + avatar */
  width: auto !important;
  /* shrink-wrap */
  margin-left: auto !important;
  /* push block to far right */
}

/* Override the row collapse */
.header.header--dashboard .dashboard-header-dropdown__link .row.collapse {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  width: auto !important;
}

/* Remove Foundation’s column widths */
.header.header--dashboard .dashboard-header-dropdown__link .small-10.columns,
.header.header--dashboard .dashboard-header-dropdown__link .small-2.columns {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Avatar tweak */
.header.header--dashboard .dashboard-header__avatar__container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Lift the user name slightly above baseline to align with avatar */
.header.header--dashboard .dashboard-header__name {
  position: relative !important;
  top: -10px !important;
  /* tweak value until it lines up */
}

/* Collapse grid gap for name + avatar */
.header.header--dashboard .dashboard-header-dropdown__link .row.collapse {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  /* remove default space */
}

/* Force the two columns to shrink-wrap around content */
.header.header--dashboard .dashboard-header-dropdown__link .small-10.columns,
.header.header--dashboard .dashboard-header-dropdown__link .small-2.columns {
  flex: 0 0 auto !important;
  /* shrink to fit content */
  width: auto !important;
  /* remove % width */
  padding: 0 !important;
  margin: 0 !important;
}

/* Add minimal manual spacing */
.header.header--dashboard .dashboard-header__avatar__container {
  margin-left: 2px !important;
  /* adjust tighter/looser */
}

.dashboard-header__arrow {
  color: #ffffff !important;
  padding: 7px;
}

/* =========================================================
   DASHBOARD NAVIGATION BAR
   ========================================================= */

/* ==================== NAVIGATION BAR STYLING ==================== */

/* Main navigation container */
.navigation-bar.top-bar--dashboard {
  background: #0f3063 !important;
  background-image: none !important;
  font-family: 'PT Sans', Arial, sans-serif !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Navigation section */
.top-bar-section {
  background: transparent !important;
}

/* Navigation list */
.top-bar-section ul.left {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 20px !important;
  list-style: none !important;
  background: transparent !important;
}

/* Navigation items */
.navigation-item {
  margin: 0 !important;
  background: transparent !important;
}

/* Navigation links */
.navigation-item a {
  font-family: 'PT Sans', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 15px 20px !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

/* Active/current page styling */
.navigation-item.active a,
.navigation-item.current a {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Mobile menu button */
.toggle-topbar.menu-icon button {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  font-family: 'PT Sans', Arial, sans-serif !important;
  font-weight: 600 !important;
}

.toggle-topbar.menu-icon button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Remove Foundation's default styling */
.top-bar {
  overflow: visible !important;
}

.top-bar .title-area {
  background: transparent !important;
}

/* Responsive adjustments */
@media only screen and (max-width: 40.0625em) {
  .top-bar-section ul.left {
    flex-direction: column !important;
    width: 100% !important;
    padding: 10px !important;
  }

  .navigation-item a {
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .navigation-item:last-child a {
    border-bottom: none !important;
  }
}

.top-bar-section ul.left {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-6%) !important;
  position: relative !important;
  top: 10% !important;
}

.header.header--article,
.header.header--article .header__inner,
.header.header--article .row {
  background: #0f3063 !important;
  background-image: none !important;
  background-color: #0f3063 !important;
}

btn btn--link company__beta-logo {
  background: #0f3063 !important;
}

/* =========================================================
   SESSION / SIGN-IN
   ========================================================= */

/* Blue background for the sign-in container */
.session__container {
  background-color: #0f3063 !important;
  padding: 20px;
  border-radius: 8px;
  color: #ffffff;
  /* default text inside container */
}

/* Headings (Sign In) */
.session__container h1,
.session__container .h2 {
  color: #ffffff !important;
}

.session h2,
.session h5 {
  color: white !important;
  font-size: 20px !important;
}

/* Helper / small text */
.session__container .text-xs {
  color: #ffffff !important;
}

/* Forgot password link */
.session__container .session__forgot a {
  color: #ffffff !important;
  text-decoration: underline;
  /* optional */
}

/* Field labels should be black */
.session__container .field__label {
  color: #000000 !important;
}

/* Input boxes stay white with black text */
.session__container .field__input {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ccc;
  /* subtle border */
}

/* Submit button: white background with blue text */
.session__container input[type="submit"].btn {
  background-color: #ffffff !important;
  color: #0f3063 !important;
  border: 2px solid #ffffff !important;
  /* optional: white border */
  font-weight: bold;
}

/* =========================================================
   AUDIO PLAYER
   ========================================================= */

/* Force icon + text into a single line */
.audio__player .row.collapse {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column;
  /* stack progress bar on top, controls below */
  gap: 10px;
}

/* Controls row (icon + text on one line) */
.audio-player__controls + .row.collapse {
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px;
}

/* Reset columns */
.audio__player .columns.small-2,
.audio__player .columns.small-10 {
  flex: unset !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
}

/* Clean play icon */
.audio-player__play-arrow,
{
  width: 0;
  height: 0;
  border-left: 14px solid #ffffff;
  /* white triangle */
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-right: 5px;
}

/* Text next to it */
.audio-player__play,
.audio-player__playing,
.audio-player__time-counter
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

/* Progress bar styling */
.audio-player__progress-indicator progress {
  width: 100% !important;
  height: 6px !important;
  -webkit-appearance: none;
  appearance: none;
}

.audio-player__progress-indicator progress::-webkit-progress-bar {
  background-color: #ffffff !important;
  border-radius: 3px;
}

.audio-player__progress-indicator progress::-webkit-progress-value {
  background-color: #fdd920 !important;
  /* change to #ffffff if you want all white */
  border-radius: 3px;
}

.audio-player__progress-indicator progress::-moz-progress-bar {
  background-color: #fdd920 !important;
}

/* Remove Thought Industries' default gray circular button */
.audio-player__play-button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/* Replace icon with a clean white triangle */
.audio-player__play-arrow {
  width: 15px;
  height: 15px;
  border-left: 10px solid #ffffff;
  border-right: 10px;
  /* white triangle */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-right: 2px;
  margin-top: 18px;
}

/* Put icon + text on same line */
.audio-player__play-button__container,
.audio-player__play {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

/* Progress bar styling */
.audio-player__progress-indicator progress {
  width: 100% !important;
  height: 6px !important;
  -webkit-appearance: none;
  appearance: none;
}

.audio-player__progress-indicator progress::-webkit-progress-bar {
  background-color: #ffffff !important;
  border-radius: 3px;
}

.audio-player__progress-indicator progress::-webkit-progress-value {
  background-color: #fdd920 !important;
  /* FPS yellow progress */
  border-radius: 3px;
}

.audio-player__progress-indicator progress::-moz-progress-bar {
  background-color: #fdd920 !important;
}

.article-sidebar__icon icon-download,
.audio-player__playing,
.audio-player__time-counter {
  color: white !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

/* FOOTER */
.footer {
  background-color: #0f3063;
  border-top: 4px solid #0f3063;
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}

.footer_inner {
  display: none !important;
}

/* Inner container */
.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 20px;
  background-color: #0f3063;
  padding-top: 0px !important;
}

/* Top columns row */
.footer .cols {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  margin-bottom: 25px;
}

/* Each column */
.footer .col {
  min-width: 160px;
}

/* Column headers */
.footer .col .header {
  font-size: 18px;
  font-weight: 700;
  color: #f6f0c5;
  margin-bottom: 10px;
  padding-left: 0px !important;
}

/* List reset */
.footer .col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .col ul li {
  margin-bottom: 6px;
}

/* Links */
.footer a {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer a:hover {
  color: #f6f0c5;
}

/* Developers column can be slightly narrower if needed */
.footer .col.developers {
  min-width: 140px;
}

/* Bottom area: copyright, legal links, social */
.footer > .container > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  ;
}

.footer .container .cols::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  /* margin: 16px 0; */
  background-color: #fff;
}

/* Left side: copyright + links container */
.footer .copyright {
  font-size: 13px;
  color: #fff;
  margin-bottom: 4px;
}

/* Legal links */
.footer .links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer .links ul li {
  margin: 0;
}

.footer .links ul li a {
  font-size: 13px;
  color: #fff;
}

.footer .links ul li a:hover {
  color: #f6f0c5;
}

/* Social icons row */
.footer .social {
  display: none;
  gap: 0px;
}

.footer__company__info {
  display: none !important;
}

/* Social icon base styling */
.footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

/* Specific networks */
.footer .social a.linkedin {
  /* background-color: #0077b5; */
}

.footer .social a.twitter {
  /* background-color: #1da1f2; */
}

/* Hover effect for social icons */
.footer .social a:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .footer .cols {
    flex-direction: column;
  }

  .footer > .container > div:last-child {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer .social {
    margin-top: 5px;
  }
}

}