/* ==========================================================================
 Login Screen.
   ========================================================================== */

/* Brand + sizing tokens */
:root {
  --brand: #2F6AFF;
  --gap: clamp(16px, 3.6vw, 64px);
  --cardW: clamp(380px, 38vw, 580px);
  --imgW: clamp(320px, 36vw, 520px);
  --chrome: 180px; /* header/breadcrumb vertical space */
}

/* Helper: "auth page detector"
   This selector matches ONLY when the page contains:
   - #login_form  (standard login form)
   - form#initiate_password_form  (forgot / reset)
   - form[action*="password_change"] (alt reset route)
   - form[action*="forgot"]          (alt forgot route)
*/
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) {
  background:#f5f6f9 !important;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden !important;
  /* allow vertical scroll normally */
}

/* Main layout container on auth pages */
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .container {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:var(--gap);
  width:100% !important;
  min-height:calc(100svh - var(--chrome)) !important;
  margin:0 auto !important;
  padding:0 clamp(12px, 3vw, 28px) !important;
  max-width:96vw !important;
  position:relative;
}

/* -----------------------------------------
   HERO IMAGE (login screen only)
   We ONLY show the hero if the login form exists.
----------------------------------------- */
body:has(#login_form) #main-content .container::before {
  content: "";
  display: block;
  width: clamp(380px, 38vw, 720px);
  aspect-ratio: 2611 / 2285; /* true ratio of your image */
  background: url("https://4804772.fs1.hubspotusercontent-na1.net/hubfs/4804772/homepage%20hero.png")
    no-repeat center center / cover;
  flex: 0 0 auto;

  /* smoother high-DPI rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

  /* entrance animation */
  opacity: 0;
  transform: translateX(-40px) scale(0.94);
  transform-origin: left center;
  filter: blur(3px);
  animation: oaHeroZoomLeft 800ms cubic-bezier(.25, .85, .25, 1) forwards;
  will-change: transform, opacity, filter;
}

/* -----------------------------------------
   AUTH CARD (login + reset share base styles)
----------------------------------------- */
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .ef-block-content {
  flex:0 0 var(--cardW);
  width:var(--cardW);
  background:#ffffff !important;
  border-radius:16px !important;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 36px rgba(0,0,0,0.05);
  padding:36px 44px !important;
  text-align:left;
  position:relative;
  overflow:hidden;

  /* tasteful zoom-up */
  opacity:0;
  transform:translateY(40px) scale(0.96);
  filter:blur(3px);
  animation:
    oaCardZoomUp 880ms cubic-bezier(.25,.85,.25,1) 120ms forwards,
    oaShadowFade 880ms ease-out 120ms forwards;
  will-change: transform, opacity, filter;
}

/* Strip legacy inner panels so nothing double-boxes inside */
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .ef-block,
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .ef-block-content .panel,
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .ef-block-content .panel-body,
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .ef-block-content .card,
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .ef-block-content .card-body {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* -----------------------------------------
   CARD HEADING — default (login)
   Only when #login_form is present
----------------------------------------- */
body:has(#login_form) #main-content .ef-block-content::before {
  content:"Welcome to Operam Academy";
  display:block;
  text-align:center;
  font-weight:800;
  color:#263845;
  line-height:1.25;
  font-size:clamp(22px, 2.2vw, 34px);
  margin-bottom:clamp(12px, 1.6vw, 22px);
}

/* -----------------------------------------
   CARD HEADING — Reset/Forgot
   Only when a reset/forgot form is present
----------------------------------------- */
body:is(
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .ef-block-content::before {
  content:"Reset your password";
  display:block;
  text-align:center;
  font-weight:800;
  color:#263845;
  line-height:1.25;
  font-size:clamp(22px, 2.2vw, 34px);
  margin-bottom:clamp(12px, 1.6vw, 22px);
}

/* -----------------------------------------
   Inputs
----------------------------------------- */
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .form-control{
  width:100% !important;
  box-sizing:border-box !important;
  border-radius:12px !important;
  border:1px solid #d9dce3 !important;
  height:clamp(42px, 5.2vh, 50px) !important;
  padding:10px 14px !important;
  font-size:clamp(14px, 1.2vw, 16px) !important;
  box-shadow:none !important;
}
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .form-control:focus{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

/* -----------------------------------------
   Primary button
----------------------------------------- */
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .btn.btn-primary{
  height:clamp(42px, 5.2vh, 50px) !important;
  padding:0 clamp(16px, 2vw, 22px) !important;
  border-radius:12px !important;
  background:var(--brand) !important;
  color:#fff !important;
  border:none !important;
  font-weight:700 !important;
  box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent) !important;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease !important;
}
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .btn.btn-primary:hover{
  background:color-mix(in srgb, var(--brand) 88%, #1e3edf) !important;
  box-shadow:0 10px 24px color-mix(in srgb, var(--brand) 36%, transparent) !important;
}

/* -----------------------------------------
   Tagline, only on login (nice little #NeverStopLearning)
----------------------------------------- */
body:has(#login_form) #main-content .ef-block-content::after{
  content:"#NeverStopLearning";
  display:block;
  text-align:center;
  font-size:clamp(12px, 1.1vw, 14px);
  color:#70798d;
  margin-top:14px;
  opacity:.92;
}

/* Hide breadcrumb/title on auth pages */
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) .breadcrumb,
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) .page-title{
  display:none !important;
}

/* ==========================================================================
   RESET / FORGOT PASSWORD layout adjustments only on reset/forgot forms
   (true center, no hero, wider card)
   ========================================================================== */
body:is(
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .container {
  justify-content:center !important;
  align-items:center !important;
  flex-direction:column !important;
  min-height:calc(100svh - 200px) !important;
  padding-top:2vh !important;
}

body:is(
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .container::before {
  display:none !important; /* hide hero on reset screens */
}

body:is(
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) #main-content .ef-block-content{
  width:clamp(560px, 52vw, 860px) !important;
  max-width:860px !important;
  padding:44px 56px !important;
  margin-inline:auto !important;
  opacity:0;
  transform:translateY(30px);
  filter:none;
  animation: fadeRise 0.8s ease-out forwards, oaShadowFade 0.8s ease-out forwards;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:1600px){
  body:is(
    :has(#login_form),
    :has(form#initiate_password_form),
    :has(form[action*="password_change"]),
    :has(form[action*="forgot"])
  ) #main-content .container {
    max-width:1440px !important;
  }
}

@media (max-width:960px){
  :root{ --gap: 28px; }

  body:is(
    :has(#login_form),
    :has(form#initiate_password_form),
    :has(form[action*="password_change"]),
    :has(form[action*="forgot"])
  ) #main-content .container{
    flex-direction:column !important;
    min-height:auto !important;
    margin-top:20px !important;
    padding-bottom:20px !important;
  }

  body:has(#login_form) #main-content .container::before{
    width:min(640px, 92vw);
    aspect-ratio:16/10;
    background-size:contain;
    transform:none;
    animation:none;
    opacity:1;
    filter:none;
  }

  body:is(
    :has(#login_form),
    :has(form#initiate_password_form),
    :has(form[action*="password_change"]),
    :has(form[action*="forgot"])
  ) #main-content .ef-block-content{
    width:min(680px, 92vw);
    padding:26px 20px !important;
  }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes oaHeroZoomLeft{
  0%   { opacity:0; transform:translateX(-40px) scale(0.92); filter:blur(3px); }
  60%  { opacity:1; transform:translateX(4px)  scale(1.02); filter:blur(0); }
  100% { opacity:1; transform:translateX(0)    scale(1);    filter:blur(0); }
}
@keyframes oaCardZoomUp{
  0%   { opacity:0; transform:translateY(40px) scale(0.96); filter:blur(3px); }
  60%  { opacity:1; transform:translateY(-4px) scale(1.02); filter:blur(0); }
  100% { opacity:1; transform:translateY(0)    scale(1);   filter:blur(0); }
}
@keyframes oaShadowFade{
  0%   { box-shadow:0 12px 36px rgba(0,0,0,0); }
  100% { box-shadow:0 12px 36px rgba(0,0,0,0.08); }
}
@keyframes fadeRise{
  0%   { opacity:0; transform:translateY(30px); }
  100% { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  body:is(
    :has(#login_form),
    :has(form#initiate_password_form),
    :has(form[action*="password_change"]),
    :has(form[action*="forgot"])
  ) #main-content .container::before,
  body:is(
    :has(#login_form),
    :has(form#initiate_password_form),
    :has(form[action*="password_change"]),
    :has(form[action*="forgot"])
  ) #main-content .ef-block-content{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* ==========================================================================
   SUPPORT BUTTON — only on auth pages
   ========================================================================== */
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) header a[href*="support"],
body:is(
  :has(#login_form),
  :has(form#initiate_password_form),
  :has(form[action*="password_change"]),
  :has(form[action*="forgot"])
) a[href*="support"] {
  display:inline-block !important;
  background-color:var(--brand) !important;
  color:#fff !important;
  font-weight:600 !important;
  padding:8px 18px !important;
  border-radius:10px !important;
  text-decoration:none !important;
  border:none !important;
}
/* ==========================================================================
 End of Login Screen.
   ========================================================================== */


div.ef-block {
    margin-bottom: 0px;
}

.alert-info hr {display:none;}

div.alert button[type="button"].close {
  position:relative;
  bottom:8px;
  color:black !important;
}

div.alert.alert-info:before {
    content: '\f02d';
    padding: 0px 17px 0px 12px;
    font-size: 4.5rem;
  	color:#01AEE9
}

div.alert.alert-info {
  	color:black;
  background-color: #F6FAFB !important;
}


/*support button icon*/
.emailicon {

    content: '\f0e0' !important;
  font-size: 50px;
  color:white;

}

/*Removal of 'Seminars' bar from eSeminar*/

#lessonTree_lesson\3a 242 > div {
 background-color:white;
  display:none !important;
}

#lessonTree_lesson\3a 242 {display:none;}

.ef-unit-tree ul > li.ef-courses-list-item.lesson-entry:nth-child(odd):not(.unit-entry) {
    background-color: white;
}

/* Adjust the Operam logo size in the header */
#ef-navbar .navbar-header img {
    max-height:80px !important;  /* adjust height */
    width: auto !important;       /* keep correct proportions */
}

/* Control logo size in the New UI */
.new-ui-html header img[title="Operam Academy"] {
    max-height: 80px !important;  /* adjust as needed */
    height: auto !important;
    width: auto !important;
}


/*changes the table menu colour*/
.topTitle, 
.topTitle a:link,
.topTitle a:visited
{
  color: #fff;
} 

/*Announcement */
.alert-warning hr {

    border-top-color: #f7e1b5;
    display: none;

}

#announcement_1_93 {
 border: 3px solid #2F6AFF;
  
}

div.alert button[type="button"].close {

    color: black;
    opacity: 0.85;
    text-shadow: 0 1px 0 #888;

}

div.alert {

padding: 20px 15px 20px 90px;
color: white;
font-weight: 300;  
}

.alert.alert-warning::before {

    content: '\f0a1';
    margin-left: 10px;
  	color: #3a3a3a;
  font-size: 50px;

}

.alert::before {

    font-weight: normal;
    font-family: FontAwesome;
    font-size: 26px;
    content: '\f12a';
    position: absolute;
    top: 50%;
    left: 40px;
    height: 40px;
    width: 30px;
    margin-top: -20px;
    text-align: center;
    line-height: 40px;
}

/*ANNOUNCEMENT END */


/*changes the sytem font colour*/
body {
  /*font-family: 'arial', sans-serif;*/
  /*color:#4B606F;*/
   }

/*changes the breadcrumb text to white*/

.breadcrumb-x .ef-breadcrumb li.active a {
font-size: 14px;
font-weight: 600;
color: #ffffff;
  }

/*Grid table AKA the course boxes*/
table.sortedTable {
  background-color:#253746;
  top: 2px; 
  border-radius:4px;
}
/*Odd rows*/
tr.oddRowColor {
  background: #C7C8CA;
  border-bottom: 1px solid #D0D0D0;
  border-top: 1px solid #D0D0D0;
}
 
/*Even rows*/
tr.evenRowColor {
  background:#C7C8CA;
}
/*On hover above row color*/
tr.oddRowColor:hover,tr.evenRowColor:hover {
  background: #C7D7F3;
}
/*Grid footer*/
td.sortedTableFooter {
  background-color:#4B606F
;
}

.h5p-create-container {
  float: none !important;
}

.ef-my-courses ul li.ef-my-courses-category > div.ef-entry-head span.ef-entry-name {
 text-transform: inherit;
}
/*Reduce size of search bar*/
#ef-navbar .container .navbar-header { max-width: 200px;}

/*Make Category text lowercase*/
.ef-card-entries .ef-card .ef-card-wrap div.caption .ef-plain.ef-category {    text-transform: none;
    font-size: 0.75em;
}

.ef-dashboard-header .ef-category-name {
 font-size: 1.2rem;
 text-transform: none;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

#searchDiv {
    background-color: #EEEFF1!important;
}
#ef-navbar form.navbar-form .selectize-input, #ef-navbar form.navbar-form input[type=text], #ef-navbar form.navbar-form span.search-handle {
    background-color: #EEEFF1;
}
.searchDivRight {
    background-color: #EEEFF1!important;
}
#sResultsDiv {
    background: #EEEFF1!important;
}
.ef-active > #searchDiv {
    background-color: #EEEFF1!important;
}
.active-search-input {
    background-color: #EEEFF1!important;
}
.searchDivCenter >.active-search-input {
    background: #EEEFF1!important;
}
.searchDivRight > span.search-handle {
    background-color: #EEEFF1!important;
}
#searchInputContainer > .clickableRow:nth-child(even) {
      background: #EEEFF1!important;
}
#sResultsDiv > .clickableRow:nth-child(even) {
      background: #EEEFF1!important;
}
#sResultsDiv > .clickableRow {
      background: #EEEFF1!important;
}
.clickableRow:hover {
        background: #EEEFF1!important;
}
.clickableRow:nth-child(even) {
        background: #EEEFF1!important;
}
.clickableRow:nth-child(even):hover {
        background: #EEEFF1!important;
}
#ef-navbar .container .row, #ef-navbar .container .row > * {
        background: #EEEFF1!important;
}

.label-ef-completed {
    background-color: #2F6AFF!important;
}
*.progress .progress-bar.progress-bar-success {
    background-color: #C1D2FF!important;
}
#ef-navbar form.navbar-form input, #ef-navbar form.navbar-form span.search-handle {
    color: #373A36!important;
}
.breadcrumb-x {
    min-height: 40px;
}
div.breadcrumb-x {
    height: 47px;
}
#ef-navbar {
    height: 72px;
}
#ef-navbar .container ul.nav.navbar-nav > li > button, #ef-navbar .container ul.nav.navbar-nav > li a.dropdown-toggle {
    color: #2F6AFF!important;
}
.breadcrumb-x {
    min-height: 40px !important;
    margin: 0 0 20px 0;
}
#ef-navbar {
  height: 100px !important;
}
div#userNavBar {
    padding: 20px 0;
}
#ef-navbar > .container #searchInputContainer {
    padding: 20px 0;
}
#ef-navbar .container ul.nav.navbar-nav > li > a:hover, #ef-navbar .container ul.nav.navbar-nav > li > button:hover, #ef-navbar .container ul.nav.navbar-nav > li > button:active {
    color: #253746;
}
#ef-navbar .container ul.nav.navbar-nav > li > a {
    color: #2F6AFF;
}
#ef-navbar .container ul.nav.navbar-nav > li > button, #ef-navbar .container ul.nav.navbar-nav > li a.dropdown-toggle {
    color: #2F6AFF;
}
div.breadcrumb-x > div > ol > li > a {
    color: white;
}

tr.text-danger td a {
    color: #A94442;
}

.ef-main-action-button .btn-success {
    background-color: #2F6AFF !important;
    border-color: #2F6AFF !important;
    color: #fff !important;
}
.ef-main-action-button .btn-success:hover {
    background-color: #243FCC !important;
    border-color: #243FCC !important;
}

/* 1. Course link hover color (bright blue) */
.ef-unit-link:hover,
.ef-unit-link.passed:hover {
  color: #2F6AFF !important;
}


/* 2. Active lesson left border color (red instead of orange) */
.ef-entry-head.row.active-content::before,
.ef-entry-head.row.current::before {
  background-color: #FF261F !important; /* your red */
}


/* 3. "Completed, Let's Continue" button color override (bright blue) */
.btn-success.ef-completed-button {
  background-color: #2F6AFF !important;
  border-color: #2F6AFF !important;
  /* optional: keep white text readable */
  color: #fff !important;
  text-transform: none !important; /* remove ALL CAPS */
}

/* 4. Change "Incomplete" button color to #F9AF2B */
.btn-primary.ef-incomplete-button {
  background-color: #F9AF2B !important;
  border-color: #F9AF2B !important;
  color: #fff !important; /* keep text white for contrast */
  text-transform: none !important; /* optional - remove all caps */
}

/* 5. Course rating stars color */
div.ef-course-rating-stars i.fa-star,
div.ef-course-rating-stars button i.fa-star {
  color: #F9AF2B !important;
}
/* Change catalog/course card rating stars to #F9AF2B */
.ef-rate .fa-star.active,
.ef-rate .fa-star {
  color: #F9AF2B !important;
}

/* Force rounded corners on the search bar */
#ef-navbar form.navbar-form #searchDiv.input-group,
#ef-navbar form.navbar-form #searchDiv.input-group #ef-search-bar {
  border-radius: 12px !important;
}
/* Fix right side of search bar curve */
.searchDivRight,
.searchDivRight .search-handle.input-group-addon {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}
/* Change ONLY the category title bars (not the individual courses) */
li.ef-my-courses-category > div.ef-entry-head {
  background-color: #263845 !important;
  color: #fff !important;
}

/* Keep text and icons white for readability */
li.ef-my-courses-category > div.ef-entry-head h2,
li.ef-my-courses-category > div.ef-entry-head .btn,
li.ef-my-courses-category > div.ef-entry-head .fa {
  color: #fff !important;
}
/* 7. Lesson title hover only (bright blue on hover) */
a.ef-entry-link:hover {
  color: #2F6AFF !important;
  text-decoration: none !important;
}

/* DO NOT ADD/EDIT AFTER THIS LINE */
#ef-navbar, #ef-navbar li a.dropdown-toggle[aria-expanded="true"]{background-color:#FFFFFF;border-color:#FFFFFF;}
*.btn.btn-primary, *.btn.btn-primary:not(.active), *.btn.btn-primary:hover, *.btn.btn-primary:hover:not(.active), *.btn.btn-primary:focus, *.btn.btn-primary:focus:not(.active){background-color:#2F6AFF;border-color:#2F6AFF;}
html.new-ui-html:root{--c-brand-primary:#ffffff;--c-brand-primary-darken-5:#fafafa;--c-brand-primary-darken-7:#f8f8f8;--c-brand-primary-darken-10:#f5f5f5;--c-brand-primary-darken-15:#f0f0f0;--c-brand-primary-darken-17:#eeeeee;--c-brand-primary-darken-20:#ebebeb;--c-brand-primary-darken-25:#e6e6e6;--c-brand-primary-lighten-7:#ffffff;--c-brand-primary-lighten-40:#ffffff;}
div.breadcrumb-x{background-color:#263845;border-color:#263845;}
html,body, body.new-ui.learner-user .ef-block, body.new-ui.learner-user #talentCraft-unit-footer, .ef-bg-color{background-color:#F4F4F4;}
html,body{background-color:#EEEFF2;}
div.ef-block, div.dashboard-panel div.panel-body{background-color:#FFFFFF;}