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

      :root {
        --font: Montserrat;
        --alt-font: Montserrat;
        --accent-color: #050f22;
        --secondary-color: #1d6bfc;
        --link-color: #e6e6e6;
        --accent-highlight-color: #050f22;
        --accent-highlight-background-color: #c8d8f7;
        --accent-tinted-color-70: #b4b7bd;
        --accent-tinted-color-80: #cdcfd3;
        --accent-tinted-color-90: #e6e7e9;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #0c234e;
        --secondary-hover-color: #4f8cfd;
        --secondary-contrast-color: #fff;
        --link-hover-color: #b3b3b3;
      }
      
body { background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/v1/course-uploads/846c2162-625a-4f6b-abe0-b7023316212a/wdf9ctq51ime-OMCA-Thumbnail1.jpg'); background-repeat: repeat; background-size: auto; }
.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_hires_v3/v1/course-uploads/846c2162-625a-4f6b-abe0-b7023316212a/julbshqyqdyc-LOGO_OA_rgb_v5_inline_neg_w_864.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* =====================================================================
   OPSWAT Academy — Full Site CSS
   Updated: 2026-07-28

   BRAND PALETTE
   --------------------------------------------------
   Dark navy      #050f22   (nav, header, hero bg, dark sections)
   Mid navy       #0d1a30   (slightly lighter dark sections)
   Slate blue     #3d5176   (body text, muted labels)
   Primary blue   #1d6bfc   (CTAs, links, active states)
   Bright blue    #3b8fff   (gradient start / hover glow)
   Hover blue     #1040cc   (gradient end / button hover)
   Light bg       #f5f7fa   (section backgrounds)
   White          #ffffff

   WIDGET CLASS ASSIGNMENTS (applied in the layout editor)
   --------------------------------------------------
   Hero Image widget              → homeheroleft
   Learner Access widget          → jldash
   Featured Content Tiles         → catalog-feature
   Featured Content Carousel      → catalog-feature2
   Dashboard Nav widget           → jldashnav
   ===================================================================== */


/* =====================================================================
   GLOBAL RESETS & UTILITIES
   ===================================================================== */

.layout__content .widget { padding: 0; margin: 0; }
.home__content .widget   { padding: 0; margin: 0; }
#learner .widget         { padding: 0; margin: 0; }

.container { max-width: 100% !important; }

.pad    { padding: 1em 4em !important; }
.padbig { padding: 2em 6em !important; }

.syllabus__section-title-index { display: none; }
a.expandable-sidebar__link[href$='/support'] { display: none; }
.learning-content-hero { max-height: 300px; }
.ember-view.catalog-aggregation.catalog-aggregation--expanded { background-color: #ffffff; }
html { scroll-behavior: smooth; }

@media only screen and (max-width: 600px) {
  .padbig { padding: 1em !important; }
}


/* =====================================================================
   OPSWAT BUTTON STYLE — gradient + glow
   ===================================================================== */

.homeheroleft .hero__caption a.btn.btn--primary {
background: linear-gradient(135deg, #3b8fff 0%, #1d6bfc 55%, #1040cc 100%);
box-shadow: 0 0 18px rgba(29, 107, 252, 0.45), 0 4px 14px rgba(0, 0, 0, 0.3);
border: none;
border-radius: 4px;
color: #ffffff !important;
font-weight: 700;
font-size: 14px;
padding: 12px 28px;
text-decoration: none;
letter-spacing: 0.3px;
transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.homeheroleft .hero__caption a.btn.btn--primary:hover {
box-shadow: 0 0 28px rgba(29, 107, 252, 0.65), 0 6px 18px rgba(0, 0, 0, 0.35);
filter: brightness(1.08);
color: #ffffff !important;
}

a.btn.btn--large {
background: transparent;
border: 1.5px solid #1d6bfc;
border-radius: 4px;
color: #1d6bfc;
font-size: 14px;
font-weight: 600;
padding: 10px 22px;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}

a.btn.btn--large:hover {
background: #1d6bfc;
color: #ffffff;
}


/* =====================================================================
   SITE HEADER — Top navigation bar
   ===================================================================== */

.global-nav__container { max-width: 100%; }

.nav.nav--global-links {
width: 100%;
background-color: #050f22;
height: 35px;
}

.nav.nav--global-links a {
color: #ffffff;
font-size: 13px;
font-weight: 500;
}

.nav.nav--global-links a:hover { color: rgba(255, 255, 255, 0.7); }

/* Fix: course/article pages render a SECOND, unstyled navigation
   directly under the one above — a native Foundation "top-bar"
   component (<nav class="top-bar">) that duplicates the exact same
   Home / Browse Content / Register / Redeem Code links, plus its own
   mobile hamburger menu. The styled bar above never collapses at any
   screen width (checked down to 480px), so this duplicate serves no
   purpose anywhere and just looks like a layout bug. Hiding it
   globally rather than per-template since it's dead weight wherever
   it appears. */
.top-bar {
display: none !important;
}


/* =====================================================================
   SITE HEADER — Logo bar & user profile
   ===================================================================== */

.header--dashboard,
.header--microsite,
.header--article {
background-color: #050f22 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header__inner {
padding: 1rem;
background-color: #050f22 !important;
}

.header__inner .header__title,
.header__inner .header__title h4,
.header__inner .header__title span {
color: #ffffff !important;
}

/* Logo sizing */
.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;
}

/* User name — white */
.header--dashboard .truncate,
.header--microsite .truncate { color: #ffffff !important; }

.header--dashboard a,
.header--dashboard span,
.header--microsite a,
.header--microsite span { color: #ffffff; }

.header--dashboard a:hover,
.header--microsite a:hover { color: rgba(255, 255, 255, 0.75); }

/* Avatar — OPSWAT blue */
.header--dashboard [class*="avatar"],
.header--microsite [class*="avatar"] {
background-color: #1d6bfc !important;
color: #ffffff !important;
}

.header--dashboard svg,
.header--microsite svg {
color: rgba(255, 255, 255, 0.7);
fill: rgba(255, 255, 255, 0.7);
}

/* Profile dropdown — override white-on-white caused by blanket header link rule */
.header--dashboard .shadow-container-box-shadow a,
.header--microsite .shadow-container-box-shadow a {
color: #050f22 !important;
}

.header--dashboard .shadow-container-box-shadow a:hover,
.header--microsite .shadow-container-box-shadow a:hover {
color: #1d6bfc !important;
}


/* =====================================================================
   MY DASHBOARD / NAV BUTTONS
   ===================================================================== */

.nav--top ul a {
font-size: 14px;
text-transform: capitalize;
background-color: #1d6bfc;
color: #ffffff;
border-radius: 4px;
padding: 8px 16px;
font-weight: 700;
}

.nav--top ul a:hover { background-color: #1756ca; }

.jldashnav { background-color: #050f22; }


/* =====================================================================
   HERO IMAGE WIDGET — homeheroleft
   ===================================================================== */

.homeheroleft .hero .hero__caption {
background: transparent;
text-align: left;
max-width: 800px;
left: 0;
top: 3em;
}

.homeheroleft .hero .hero__caption .hero__title {
color: #ffffff;
font-weight: 700 !important;
font-size: 42px !important;
margin-top: 0;
margin-bottom: 0.25em;
line-height: 1.1;
}

.homeheroleft .hero .hero__caption .h4 {
color: rgba(255, 255, 255, 0.85);
font-weight: 400 !important;
font-size: 18px !important;
margin-bottom: 0;
}

.homeheroleft .hero__caption a.btn.btn--primary {
position: absolute;
top: 10em;
margin: 0;
}

@media only screen and (max-width: 767px) {
  .homeheroleft .hero .hero__caption .hero__title { font-size: 28px !important; }
.homeheroleft .hero .hero__caption .h4         { font-size: 15px !important; }
}


/* =====================================================================
   LEARNER ACCESS WIDGET — jldash
   ===================================================================== */

.jldash .dashboard-access__header,
.jldash .dashboard-access__header.dashboard-access__header--expanded {
background: #050f22;
padding: 20px 3em;
border-bottom: none;
}

.jldash .dashboard-access__header,
.jldash .dashboard-access__header p,
.jldash .dashboard-access__header span,
.jldash .dashboard-access__header h1,
.jldash .dashboard-access__header h2,
.jldash .dashboard-access__header h3,
.jldash .dashboard-access__header h4,
.jldash .dashboard-access__header label,
.jldash .dashboard-access__header * {
color: #ffffff !important;
}

.jldash .dashboard-access__header p { font-size: 18px; font-weight: 500; }

.dashboard-access-tabs.unlist {
background: #0d1a30;
padding: 10px 3em;
display: flex;
flex-wrap: wrap;
gap: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tab buttons */
.jldash .dashboard-access-tab--inactive,
.jldash .dashboard-access-tab {
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.35);
border-radius: 4px;
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
font-weight: 600;
padding: 8px 18px;
cursor: pointer;
transition: all 0.15s ease;
}

/* Fix: TI wraps label text in a <button> that resets color to black */
.jldash .dashboard-access-tab button {
color: inherit !important;
}

.jldash .dashboard-access-tab--inactive:hover {
border-color: rgba(255, 255, 255, 0.7);
color: #ffffff;
}

/* Active tab */
.jldash .dashboard-access-tab--active {
background: linear-gradient(135deg, #3b8fff 0%, #1d6bfc 55%, #1040cc 100%);
border-color: transparent;
box-shadow: 0 0 14px rgba(29, 107, 252, 0.5);
color: #ffffff;
font-weight: 700;
border-radius: 4px;
padding: 8px 18px;
}

/* Count badges */
.jldash .dashboard-access-tab__count {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
margin-left: 5px;
}

.jldash .dashboard-access-tab--active .dashboard-access-tab__count {
background: rgba(255, 255, 255, 0.3);
}

/* Content rows */
.jldash .dashboard-access-list-item {
border-bottom: 1px solid #e8eaf0;
background: #ffffff;
}

.jldash .dashboard-access-list-item-expander {
padding: 24px 3em;
}

.jldash .dashboard-access-list-item-expander__title {
color: #050f22;
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
letter-spacing: -0.2px;
}

.jldash .dashboard-access-list-item-expander__description {
color: #3d5176;
font-size: 14px;
margin-bottom: 8px;
}

/* Inner sub-tabs */
.jldash .nav-tabs {
border-bottom: 1px solid #e8eaf0;
padding: 0 3em;
background: #f5f7fa;
}

.jldash .nav-tabs > li > a {
color: #3d5176;
font-size: 13px;
font-weight: 600;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
padding: 10px 16px;
background: transparent;
}

.jldash .nav-tabs > li.active > a,
.jldash .nav-tabs > li > a:hover,
.jldash .nav-tabs > li > a:focus {
color: #050f22;
border-bottom: 3px solid #1d6bfc;
background: transparent;
border-top: none;
border-left: none;
border-right: none;
}

.jldash a[href*="#top"],
.jldash .back-to-top {
color: #1d6bfc;
font-size: 13px;
font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .dashboard-access-tabs.unlist        { padding: 10px 1em; }
.jldash .dashboard-access-list-item-expander { padding: 16px 1em; }
.jldash .nav-tabs                    { padding: 0 1em; }
.jldash .dashboard-access__header    { padding: 16px 1em; }
}


/* =====================================================================
   FEATURED CONTENT TILES — catalog-feature
   ===================================================================== */

.layout__content .widget.catalog-feature {
padding: 2.5em 3em !important;
background: #ffffff;
}

.catalog-feature h2,
.catalog-feature h3 {
color: #050f22;
font-size: 22px;
font-weight: 700 !important;
margin-bottom: 4px;
}

.catalog-feature > p,
.catalog-feature .section-description {
color: #3d5176;
font-size: 14px;
margin-bottom: 24px;
}

.catalog-feature .catalog-grid-item {
border-radius: 4px;
border: 1px solid #e2e6ef;
background-color: #ffffff;
transition: box-shadow 0.2s ease, transform 0.2s ease;
overflow: hidden;
}

.catalog-feature .catalog-grid-item:hover {
box-shadow: 0 6px 24px rgba(5, 15, 34, 0.12);
transform: translateY(-3px);
}

.catalog-feature .catalog-grid-item__title {
color: #050f22;
font-size: 15px;
font-weight: 600;
}

.catalog-feature .catalog-grid-item__description {
padding-top: 12px;
padding-bottom: 10px;
background-color: #ffffff;
color: #3d5176;
font-size: 13px;
}

.catalog-feature .catalog-grid-item__source {
color: #3d5176;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
}

.catalog-feature .catalog-grid-item__hr { display: none; }

.catalog-feature .catalog-grid-item__cta-container {
height: 50px;
padding: 25px 10px 0;
}

.catalog-feature .catalog-grid-item__cta-container a,
.catalog-feature .catalog-grid-item__cta-container .btn {
font-size: 13px;
padding: 8px 20px;
}

.catalog-feature .catalog-grid-item__asset { border-radius: 4px 4px 0 0; }

@media only screen and (max-width: 767px) {
  .catalog-feature { padding: 2em 1em; }
}


/* =====================================================================
   FEATURED CONTENT CAROUSEL — catalog-feature2
   ===================================================================== */

.layout__content .widget.catalog-feature2 {
padding: 2.5em 3em !important;
background: #f5f7fa;
}

.catalog-feature2 h2,
.catalog-feature2 h3 {
color: #050f22;
font-size: 22px;
font-weight: 700 !important;
margin-bottom: 4px;
}

.catalog-feature2 > p,
.catalog-feature2 .section-description {
color: #3d5176;
font-size: 14px;
margin-bottom: 24px;
}

.catalog-feature2 .featured-content-multi-carousel {
border-radius: 4px;
background-color: transparent;
}

.catalog-feature2 .featured-content-multi-carousel-item__body {
border-radius: 4px;
border: 1px solid #e2e6ef;
background-color: #ffffff;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.catalog-feature2 .featured-content-multi-carousel-item__body:hover {
box-shadow: 0 6px 24px rgba(5, 15, 34, 0.1);
transform: translateY(-2px);
}

.catalog-feature2 .featured-content-multi-carousel-item__title {
font-size: 15px;
font-weight: 600 !important;
text-align: left;
padding-left: 10px;
color: #050f22;
}

.catalog-feature2 .featured-content-multi-carousel-item__description {
text-align: left;
color: #3d5176;
font-size: 13px;
}

.catalog-feature2 .featured-content-multi-carousel-item__source {
text-align: left;
padding-left: 10px;
color: #3d5176;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
}

.catalog-feature2 .featured-content-item__authors {
text-align: left;
padding-left: 10px;
color: #3d5176;
}

.catalog-feature2 .featured-content-multi-carousel__nav-left,
.catalog-feature2 .featured-content-multi-carousel__nav-right {
background: linear-gradient(135deg, #3b8fff 0%, #1d6bfc 55%, #1040cc 100%);
box-shadow: 0 0 12px rgba(29, 107, 252, 0.4);
color: #ffffff;
border: none;
border-radius: 4px;
}

.catalog-feature2 .featured-content-multi-carousel__nav-left:hover,
.catalog-feature2 .featured-content-multi-carousel__nav-right:hover {
box-shadow: 0 0 20px rgba(29, 107, 252, 0.6);
filter: brightness(1.08);
}

@media only screen and (max-width: 767px) {
  .catalog-feature2 { padding: 2em 1em; }
}


/* =====================================================================
   CATALOG WIDGET — opCatalog
   ===================================================================== */

.layout__content .widget.opCatalog {
padding: 2.5em 3em !important;
background: #ffffff;
}

.catalog-search input[type="search"],
.catalog-search input[type="text"] {
border: 1.5px solid #d8dce8;
border-radius: 4px;
color: #050f22;
font-size: 14px;
padding: 10px 16px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.catalog-search input:focus {
border-color: #1d6bfc;
outline: none;
box-shadow: 0 0 0 3px rgba(29, 107, 252, 0.12);
}

.catalog-search button {
background: linear-gradient(135deg, #3b8fff 0%, #1d6bfc 55%, #1040cc 100%);
color: #ffffff;
border-radius: 4px;
border: none;
box-shadow: 0 0 10px rgba(29, 107, 252, 0.35);
}

.catalog-search button:hover { filter: brightness(1.08); }

.catalog-filters a           { color: #1d6bfc; font-size: 13px; }
.catalog-filters a:hover     { color: #1040cc; }
.catalog-filters .active a,
.catalog-filters a.active    { color: #050f22; font-weight: 700; }

.catalog-display-type .btn {
border-radius: 4px;
color: #3d5176;
border-color: #d8dce8;
background: #ffffff;
}

.catalog-display-type .btn.active,
.catalog-display-type .btn:hover {
background: #050f22;
color: #ffffff;
border-color: #050f22;
}

.catalog-grid-item {
border: 1px solid #e2e6ef;
border-radius: 4px;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
background: #ffffff;
}

.catalog-grid-item:hover {
box-shadow: 0 6px 24px rgba(5, 15, 34, 0.1);
transform: translateY(-2px);
}

.catalog-grid-item__title       { color: #050f22; font-size: 15px; font-weight: 600; }
.catalog-grid-item__description { color: #3d5176; font-size: 13px; }
.catalog-grid-item__source      { color: #3d5176; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }


/* =====================================================================
   MISC WIDGET PADDING & UTILITIES
   ===================================================================== */

.widget--credly.widget--credly_standard {
padding: 2em 3em !important;
}

.ember-view.row.widget.widget--discussion-board.widget--discussion-board_standard {
padding: 2em 3em !important;
}

.bland.ember-view.row.widget.widget--one-column.widget--one-column_standard {
background-color: #f5f7fa;
}

.two-col.right .roles {
display: flex;
gap: 0.5rem;
flex-direction: row;
max-width: 500px;
flex-wrap: wrap;
}