@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* ============================================================
   BRANDS Education — course.brandseducation.com (student LMS)
   Modern skin, CSS only. Load AFTER style.css, custom.css,
   header-custom.css and jquery.dataTables.min.css on every page.
   Palette = brandseducation.com (navy / steel blue / white).
   ============================================================ */

:root{
  --navy:#14151F; --blue:#2E6A8E; --blue-hover:#255A7A; --blue-tint:#EAF2F7; --blue-soft:#D7E6F0;
  --ink:#14151F; --body:#374151; --muted:#6B7280; --line:#E3E7EC; --page:#F6F8FA;
  --ok:#1D9E75; --ok-tint:#E1F5EE; --warn:#BA7517; --warn-tint:#FAEEDA;
  --r-card:14px; --r-btn:10px; --shadow:0 8px 24px rgba(20,21,31,.08);
  /* header-custom.css reads these — re-point them to the BRANDS palette */
  --ib-primary:#14151F; --ib-accent:#2E6A8E; --ib-bg:#FFFFFF; --ib-muted:#EAF2F7;
}

html,body{background:var(--page)!important;color:var(--body)}
.dashboard-wrap{background:var(--page)!important;min-height:60vh}
a{transition:color .15s,background .15s,border-color .15s}

/* ============================================================
   course.brandseducation.com — header made to match the
   brandseducation.com header 1:1 (measured from the live site)
   nav 76px white · logo 54px · 40px grey circles #EEEEF1 ·
   teal date chip #E6F6F7/#137A82 · red badge #E11D48 ·
   avatar 42px ring #D9DAE0 · font Inter · gap 10px
   ============================================================ */

:root{
  --hd-ink:#1C1D1F; --hd-icon:#15161B; --hd-chip:#EEEEF1; --hd-chip-hover:#E2E3E8; --hd-ring:#D9DAE0;
  --hd-teal-bg:#E6F6F7; --hd-teal:#137A82; --hd-teal-2:#2BB3BD; --hd-red:#E11D48; --hd-line:#EEF0F2; --hd-hover-bg:#E9F3F5; --hd-hover-ink:#145158;
  --hd-font:Inter,Poppins,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- bar ---- */
/* no backdrop-filter on the header: it makes the header the containing block of the position:fixed drawers (#leftsidebar/#rightsidebar) and clips them */
.main-navbar-wrap.custom_header{background:#fff!important;border-bottom:0!important;box-shadow:0 1px 0 var(--hd-line),0 2px 8px rgba(28,29,31,.04)!important;font-family:var(--hd-font);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important}
.main-navbar-wrap nav.navbar{padding:0!important;min-height:0!important}
.main-navbar-wrap nav.navbar .containerMain{display:flex!important;align-items:center!important;flex-wrap:wrap;column-gap:16px;row-gap:0;padding:0 15px!important;min-height:76px;max-width:none!important;width:100%!important;margin:0!important}
/* full width: the empty ul.leftiMenuMain and the 0-width section#pmd-main (mobile sidebars, position:fixed inside) are flex items that each add a 16px gap on the right — take them out of the row */
.main-navbar-wrap .containerMain > section#pmd-main{position:absolute!important;width:0!important;height:0!important;margin:0!important;padding:0!important}
.main-navbar-wrap .containerMain > ul.leftiMenuMain:not(:has(li)){display:none!important}
/* page content spans the same width as the header (15px side gutters) */
.dashboard-wrap > .container{max-width:none!important;width:100%!important;padding-left:15px!important;padding-right:15px!important}
.main-navbar-wrap nav.navbar .containerMain > *{font-family:var(--hd-font)}

/* order of items on the row */
.main-navbar-wrap .containerMain > a.minieflrt.btn{order:1}
.main-navbar-wrap .containerMain > a.navbar-brand{order:2}
.main-navbar-wrap .containerMain > .menuHomeMainBox{order:3}
.main-navbar-wrap .containerMain > ul.leftiMenuMain{order:4}
.main-navbar-wrap .containerMain > #mainNavbarContent{order:6}
.main-navbar-wrap .containerMain > .pmd-navbar-right-icon{order:7}
.main-navbar-wrap .containerMain > section#pmd-main{order:9}
.main-navbar-wrap .containerMain > ul.menuNav.menuDecktop{order:20}

/* ---- left: hamburger · logo · home · Become a tutor ---- */
.main-navbar-wrap .containerMain > a.minieflrt.btn{margin:0!important;width:40px;height:40px;border-radius:50%!important;background:var(--hd-chip)!important;border:0!important;color:var(--hd-icon)!important;box-shadow:none!important;align-items:center;justify-content:center;padding:0!important}
.main-navbar-wrap .containerMain > a.minieflrt.btn i{color:var(--hd-icon)!important;font-size:22px}
.main-navbar-wrap .containerMain > a.navbar-brand{margin:0!important;padding:0!important;display:flex!important;align-items:center;height:76px}
.main-navbar-wrap .containerMain > a.navbar-brand img{height:54px!important;width:auto!important;max-width:none!important}
.main-navbar-wrap .containerMain > .menuHomeMainBox{display:flex!important;align-items:center;gap:16px;margin:0 0 0 8px!important;vertical-align:middle!important}
.main-navbar-wrap .menuHomeMainBox ul.menuHomeMain{display:flex!important;align-items:center;gap:16px;margin:0!important;padding:0!important}
.main-navbar-wrap .menuHomeMainBox ul.menuHomeMain li{margin:0!important;display:flex;align-items:center}
.main-navbar-wrap .menuHomeMainBox ul.menuHomeMain li.ibHomePill a{width:40px;height:40px;border-radius:50%!important;background:var(--hd-chip)!important;border:0!important;display:inline-flex!important;align-items:center;justify-content:center;color:var(--hd-icon)!important}
.main-navbar-wrap .menuHomeMainBox ul.menuHomeMain li.ibHomePill a svg{width:18px;height:18px}
.main-navbar-wrap .menuHomeMainBox ul.menuHomeMain li:not(.ibHomePill) a{color:var(--hd-ink)!important;font-size:15px!important;font-weight:500!important;line-height:1;padding:8px 4px;background:transparent!important;border:0!important}
.main-navbar-wrap .menuHomeMainBox ul.menuHomeMain li:not(.ibHomePill) a:hover{color:var(--hd-teal)!important}
.main-navbar-wrap .containerMain > ul.leftiMenuMain{margin:0!important}
.main-navbar-wrap ul.leftiMenuMain a{color:var(--hd-ink)!important;font-size:15px!important;font-weight:500!important}

/* ---- right cluster ---- */
.main-navbar-wrap .containerMain > #mainNavbarContent{flex:1 1 auto!important;display:flex!important;justify-content:flex-end;align-items:center;min-width:0;margin:0!important;padding:0!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap{display:flex!important;align-items:center!important;gap:10px;margin:0!important;padding:0!important;flex-wrap:nowrap}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li{margin:0!important;padding:0!important;position:relative!important;top:auto!important;transform:none!important;display:flex!important;align-items:center;height:40px;float:none!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown{display:flex;align-items:center;height:40px;position:static!important}

/* date / time chip (same teal chip as the main site) */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.btn_timing{display:flex!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_timing #dateTime{display:flex!important;flex-direction:column;justify-content:center;gap:2px;height:40px;padding:0 12px!important;border-radius:10px!important;background:var(--hd-teal-bg)!important;color:var(--hd-teal)!important;font-size:12px!important;font-weight:400;line-height:normal;margin:0!important;white-space:nowrap}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_timing #dateTime .nav-date-wrapper{display:flex;align-items:center;gap:6px;height:16px;color:var(--hd-teal)!important;font-size:12px!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_timing #dateTime .nav-date-wrapper *{color:var(--hd-teal)!important;font-size:12px!important}

/* every icon = 40px grey circle, no border */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > a,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown > a{width:40px;min-width:40px;height:40px;border-radius:50%!important;background:var(--hd-chip)!important;border:0!important;color:var(--hd-icon)!important;display:inline-flex!important;align-items:center;justify-content:center;padding:0!important;margin:0!important;box-shadow:none!important;line-height:1!important;transition:background .15s;flex:none}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > a i,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown > a i{font-size:16px!important;color:var(--hd-icon)!important;line-height:1}

/* language = globe circle (text hidden, like the main site); currency = short pill */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang .dropdown > a{width:40px!important;padding:0!important;font-size:0!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang .dropdown > a::before{content:"\f0ac";font-family:FontAwesome;font-size:16px;color:var(--hd-icon)}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang .dropdown > a::after{display:none!important}
/* language button: thin outline globe (same icon as the main site), drawn as an inline SVG so it needs no icon font */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang:not(.udsing) .dropdown > a::before{content:"";font-family:inherit;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2218%22%20height=%2218%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2315161B%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Cpath%20d=%22M2%2012h20%22/%3E%3Cpath%20d=%22M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z%22/%3E%3C/svg%3E") center/18px 18px no-repeat;display:block}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang:not(.udsing) .dropdown > a.dropdown-button span.languagecls,.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang:not(.udsing) .dropdown > a.dropdown-button img{display:none!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang.udsing .dropdown > a{width:auto!important;min-width:40px;padding:0 14px!important;border-radius:999px!important;font-size:13px!important;font-weight:600!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang.udsing .dropdown > a::before{display:none}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang.udsing .dropdown > a .languagecls{display:inline!important;color:var(--hd-icon)!important;font-size:13px!important;font-weight:600!important}

/* badges: exactly like the main site — 18px red dot pinned to the top-right of the 40px circle.
   #totalcart etc. are set with id selectors in custom.css, so these use ids + !important too. */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > a,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown > a{width:40px!important;height:40px!important;min-width:40px!important;position:relative!important;overflow:visible!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap .badge,
.main-navbar-wrap #mainNavbarContent #totalcart,.main-navbar-wrap #mainNavbarContent #totalmessage,
.main-navbar-wrap #mainNavbarContent #totalnotification,.main-navbar-wrap #mainNavbarContent #totalwishlist{position:absolute!important;top:-4px!important;right:-4px!important;left:auto!important;bottom:auto!important;transform:none!important;width:auto!important;min-width:18px!important;height:18px!important;line-height:18px!important;padding:0 5px!important;margin:0!important;border-radius:999px!important;background:var(--hd-red)!important;color:#fff!important;font-size:11px!important;font-weight:700!important;border:0!important;box-shadow:none!important;text-align:center;display:inline-block!important;z-index:2;font-family:var(--hd-font)}
/* empty badges (no count yet) stay hidden; the wallet badge is a blank placeholder */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap .badge:empty,
.main-navbar-wrap #mainNavbarContent #totalcart:empty,.main-navbar-wrap #mainNavbarContent #totalmessage:empty,
.main-navbar-wrap #mainNavbarContent #totalnotification:empty,.main-navbar-wrap #mainNavbarContent #totalwishlist:empty,
.main-navbar-wrap #mainNavbarContent #totalwallet{display:none!important}

/* avatar: 42px ring + 38px image, same frame as the main-site initial */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.vsn_vx > .dropdown > a{width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;overflow:hidden;background:var(--hd-chip)!important;border:2px solid var(--hd-ring)!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.vsn_vx img{width:38px!important;height:38px!important;object-fit:cover;border-radius:50%!important;margin:0!important;border:0!important;background:linear-gradient(135deg,var(--hd-teal-2),var(--hd-teal))}

/* hover: light-teal circle + teal icon, same as the main site */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > a:hover,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown > a:hover,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.show > a,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown.show > a,
.main-navbar-wrap .menuHomeMainBox ul.menuHomeMain li.ibHomePill a:hover,
.main-navbar-wrap .containerMain > a.minieflrt.btn:hover,
.main-navbar-wrap .pmd-navbar-right-icon a.pmd-btn-fab:hover{background:var(--hd-hover-bg)!important;color:var(--hd-hover-ink)!important}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > a:hover i,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown > a:hover i,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown.show > a i,
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang.udsing .dropdown > a:hover .languagecls,
.main-navbar-wrap .menuHomeMainBox ul.menuHomeMain li.ibHomePill a:hover svg,
.main-navbar-wrap .containerMain > a.minieflrt.btn:hover i,
.main-navbar-wrap .pmd-navbar-right-icon a.pmd-btn-fab:hover i{color:var(--hd-hover-ink)!important;stroke:var(--hd-hover-ink)}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.btn_lang:not(.udsing) .dropdown > a:hover::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2218%22%20height=%2218%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23145158%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Cpath%20d=%22M2%2012h20%22/%3E%3Cpath%20d=%22M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z%22/%3E%3C/svg%3E")}
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.vsn_vx > .dropdown > a:hover{background:var(--hd-chip)!important;border-color:var(--hd-hover-ink)!important}

/* right hamburger (mobile) */
.main-navbar-wrap .containerMain > .pmd-navbar-right-icon{margin:0!important}
.main-navbar-wrap .pmd-navbar-right-icon a.pmd-btn-fab{width:40px;height:40px;border-radius:50%!important;background:var(--hd-chip)!important;border:0!important;color:var(--hd-icon)!important;display:inline-flex!important;align-items:center;justify-content:center;box-shadow:none!important}
.main-navbar-wrap .pmd-navbar-right-icon a.pmd-btn-fab i{color:var(--hd-icon)!important;font-size:22px}

/* ---------- SECOND ROW: full-width tabs with icons (Dashboard · Online Classes · My Schedule · Online Materials · My Profile) ----------
   "#mainNavbarContent ~ ul" gives id-level specificity over header-custom.css / style.css.
   Icons are CSS masks coloured with currentColor, mapped by position (1–5) — keep the tab order. */
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop{order:20;flex:0 0 100%!important;width:100%!important;display:flex!important;justify-content:stretch!important;align-items:stretch;gap:8px!important;margin:0!important;padding:10px 0 12px!important;padding-left:0!important;padding-right:0!important;border:0!important;border-top:1px solid var(--hd-line)!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item{flex:1 1 0!important;min-width:0;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;display:flex}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item a.nav-link{position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:9px;height:44px;width:100%!important;padding:0 16px!important;margin:0!important;border:0!important;border-bottom:0!important;border-radius:12px!important;background:transparent!important;color:#1C1D1F!important;font-family:var(--hd-font);font-size:14px!important;font-weight:500!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item a.nav-link::before{content:"";width:17px;height:17px;flex:none;background-color:currentColor;-webkit-mask:var(--tab-icon) center/17px 17px no-repeat;mask:var(--tab-icon) center/17px 17px no-repeat;opacity:.85}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item:nth-child(1) a.nav-link{--tab-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20width=%227%22%20height=%229%22%20x=%223%22%20y=%223%22%20rx=%221%22/%3E%3Crect%20width=%227%22%20height=%225%22%20x=%2214%22%20y=%223%22%20rx=%221%22/%3E%3Crect%20width=%227%22%20height=%229%22%20x=%2214%22%20y=%2212%22%20rx=%221%22/%3E%3Crect%20width=%227%22%20height=%225%22%20x=%223%22%20y=%2216%22%20rx=%221%22/%3E%3C/svg%3E")}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item:nth-child(2) a.nav-link{--tab-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m22%208-6%204%206%204V8Z%22/%3E%3Crect%20width=%2214%22%20height=%2212%22%20x=%222%22%20y=%226%22%20rx=%222%22%20ry=%222%22/%3E%3C/svg%3E")}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item:nth-child(3) a.nav-link{--tab-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20width=%2218%22%20height=%2218%22%20x=%223%22%20y=%224%22%20rx=%222%22%20ry=%222%22/%3E%3Cline%20x1=%2216%22%20x2=%2216%22%20y1=%222%22%20y2=%226%22/%3E%3Cline%20x1=%228%22%20x2=%228%22%20y1=%222%22%20y2=%226%22/%3E%3Cline%20x1=%223%22%20x2=%2221%22%20y1=%2210%22%20y2=%2210%22/%3E%3C/svg%3E")}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item:nth-child(4) a.nav-link{--tab-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2%203h6a4%204%200%200%201%204%204v14a3%203%200%200%200-3-3H2z%22/%3E%3Cpath%20d=%22M22%203h-6a4%204%200%200%200-4%204v14a3%203%200%200%201%203-3h7z%22/%3E%3C/svg%3E")}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item:nth-child(5) a.nav-link{--tab-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%2212%22%20cy=%227%22%20r=%224%22/%3E%3C/svg%3E")}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item a.nav-link:hover{background:var(--hd-hover-bg)!important;color:var(--hd-hover-ink)!important}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item.active a.nav-link,
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item a.nav-link.active{background:var(--hd-teal)!important;color:#fff!important;font-weight:600!important;border-bottom:0!important;box-shadow:0 4px 12px rgba(19,122,130,.22)}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item.active a.nav-link::before,
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item a.nav-link.active::before{opacity:1}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item a.nav-link::after{display:none!important}
.main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item a.nav-link .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media (max-width:1199.98px){
  .main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop{gap:6px!important}
  .main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop li.nav-item a.nav-link{padding:0 10px!important;font-size:13px!important;height:40px;gap:7px}
}

/* ============================================================
   MOBILE HEADER (≤991px) — the avatar is the ONE menu button
   Both hamburgers (left #leftsidebar, right #rightsidebar) are hidden; the avatar dropdown
   (styled below under PROFILE MENU) holds every page. Icon row = cart · wishlist · chat · bell.
   ============================================================ */
@media (max-width:991.98px){
  .main-navbar-wrap nav.navbar .containerMain{padding:0 12px!important;column-gap:8px;min-height:60px;flex-wrap:wrap}
  .main-navbar-wrap .containerMain > a.minieflrt.btn,
  .main-navbar-wrap .containerMain > .pmd-navbar-right-icon,
  .main-navbar-wrap .containerMain > .menuHomeMainBox{display:none!important}
  .main-navbar-wrap .containerMain > a.navbar-brand{height:60px;order:1;margin-right:auto!important;flex:0 0 auto!important;width:auto!important}
  .main-navbar-wrap .containerMain > a.navbar-brand img{height:38px!important}
  /* #mainNavbarContent becomes transparent so the icon list is a direct child of the header row */
  .main-navbar-wrap .containerMain > #mainNavbarContent{display:contents!important}
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap{order:2!important;margin-left:auto!important;width:auto!important;flex:0 0 auto!important;max-width:none!important;justify-content:flex-end;gap:6px;flex-wrap:nowrap}
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.btn_timing,
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.btn_lang,
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.iconiInformi,
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li:has(> a#filemager),
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li:has(> a#filemager13),
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li:has(ul.lisitThemeIcon){display:none!important}
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > a,
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown > a{width:36px!important;min-width:36px!important;height:36px!important}
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap .badge{min-width:16px!important;height:16px!important;line-height:16px!important;font-size:10px!important;top:-3px!important;right:-3px!important}
  .main-navbar-wrap #mainNavbarContent ul.navbar-nav.menuNav.menuMobi{display:none!important}
  aside#leftsidebar.pmd-sidebar,aside#rightsidebar.pmd-sidebar{display:none!important}
}

/* ============================================================
   PROFILE MENU (avatar dropdown, li.vsn_vx > .dropdown-menu > ul#dropdownone.drop_cont)
   Same design as the brandseducation.com profile dropdown, and on mobile it is THE menu.
   Markup to use in the template (copy of the main site):
     <li class="hdp-top"><span class="hdp-av"><span class="hd-initial">n</span></span>
         <span class="hdp-who"><span class="hdp-name">nelcstudent</span><span class="hdp-role">Student</span></span></li>
     <li class="hdp-profile"><a href="…"><i class="fa fa-user-o"></i><span>Profile</span></a></li>
     <li><a href="…">Dashboard</a></li> … (all pages) …
     <li class="hdp-sep"></li>
     <li class="hdp-logout"><a href="…"><i class="fa fa-sign-out"></i> Logout</a></li>
   ============================================================ */
:root{--pm-ink:#15161B;--pm-muted:#8B8E9D;--pm-line:#EEEEF1;--pm-hover:#F3F4F6;--pm-red:#E11D48}
.main-navbar-wrap #mainNavbarContent li.vsn_vx .dropdown-menu{width:250px!important;min-width:250px!important;max-width:calc(100vw - 24px)!important;border:1px solid var(--pm-line)!important;border-radius:14px!important;box-shadow:0 12px 32px rgba(20,20,30,.12)!important;padding:0!important;margin-top:8px!important}
.main-navbar-wrap #mainNavbarContent li.vsn_vx .dropdown-menu > ul#dropdownone.drop_cont{padding:6px!important;margin:0!important;max-height:calc(100vh - 110px);overflow:auto;border-radius:14px!important;font-family:var(--hd-font);position:static!important;display:block!important;opacity:1!important;transform:none!important;height:auto!important;width:auto!important;box-shadow:none!important;background:#fff!important}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li{margin:0!important;padding:0!important;border:0!important;list-style:none}
/* header: avatar + name + role */
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.hdp-top{display:flex!important;align-items:center;gap:10px;padding:8px 8px 12px!important;margin:0 0 6px!important;border-bottom:1px solid var(--pm-line)!important}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont .hdp-av{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;display:inline-flex}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont .hdp-av .hd-initial,
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont .hdp-av img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#2BB3BD,#137A82);color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont .hdp-who{display:flex;flex-direction:column;min-width:0}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont .hdp-name{font-size:14px;font-weight:700;color:var(--pm-ink);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont .hdp-role{font-size:12px;color:var(--pm-muted);line-height:1.35}
/* items */
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li > a{display:flex!important;align-items:center;gap:10px;min-height:37px;padding:9px 12px!important;border-radius:8px!important;color:var(--pm-ink)!important;font-size:14px!important;font-weight:500!important;line-height:1.35!important;background:transparent!important;white-space:nowrap;text-transform:none!important;letter-spacing:0!important}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li > a i,
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li > a svg{width:18px;height:18px;font-size:16px;text-align:center;color:var(--pm-muted)!important;flex:none}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li > a:hover,
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li > a.active,
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.active > a{background:var(--pm-hover)!important;color:var(--pm-ink)!important}
/* section label (optional <li class="hdp-label">Learning</li>) */
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.hdp-label{padding:10px 12px 4px!important;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pm-muted)}
/* dark-theme row (if the template includes the main-site toggle) */
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.bx_toggi{display:flex!important;align-items:center;gap:10px;padding:9px 12px!important;font-size:14px;color:var(--pm-ink)}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.bx_toggi label{margin-left:auto}
/* separator + logout */
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.hdp-sep{height:1px;margin:6px 4px!important;background:var(--pm-line)}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.hdp-logout > a,
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li:last-child > a[href*="logout"]{color:var(--pm-red)!important;font-weight:600!important}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.hdp-logout > a i,
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li:last-child > a[href*="logout"] i{color:var(--pm-red)!important}
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.hdp-logout > a:hover,
.main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li:last-child > a[href*="logout"]:hover{background:#FCEBEB!important}

/* ---------- MOBILE: the avatar menu is the only menu ---------- */
@media (max-width:991.98px){
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.vsn_vx{display:flex!important;order:99}
  .main-navbar-wrap .containerMain > .pmd-navbar-right-icon{display:none!important}
  .main-navbar-wrap .containerMain > a.minieflrt.btn{display:none!important}
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.vsn_vx > .dropdown > a{width:40px!important;min-width:40px!important;height:40px!important}
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.vsn_vx img,
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.vsn_vx .hd-initial{width:36px!important;height:36px!important}
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.vsn_vx > .dropdown > .dropdown-menu,
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.vsn_vx .dropdown-menu.show{position:fixed!important;top:66px!important;right:12px!important;left:auto!important;bottom:auto!important;transform:none!important;margin:0!important;width:min(320px,calc(100vw - 24px))!important;min-width:0!important}
  .main-navbar-wrap #mainNavbarContent li.vsn_vx .dropdown-menu > ul#dropdownone.drop_cont{max-height:calc(100vh - 80px)}
  /* the tabs pill row is no longer needed once the menu holds every page */
  .main-navbar-wrap #mainNavbarContent ul.navbar-nav.menuNav.menuMobi{display:none!important}
  aside#leftsidebar.pmd-sidebar,aside#rightsidebar.pmd-sidebar{display:none!important}
}

/* ---------- HEADER DROPDOWNS — same look as the brandseducation.com mini-cart ---------- */
/* the inner ul.dropdown-content is absolutely positioned by the old theme; make it flow inside the bootstrap panel */
.main-navbar-wrap .dropdown-menu{font-family:var(--hd-font);border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:0 16px 40px rgba(20,21,31,.14)!important;padding:0!important;margin-top:10px!important;background:#fff!important;overflow:visible!important;left:auto!important;right:0!important;top:100%!important;transform:none!important;width:max-content!important;min-width:220px!important;max-width:380px!important;height:auto!important}
.main-navbar-wrap .dropdown-menu > ul.dropdown-content{position:static!important;top:auto!important;left:auto!important;right:auto!important;opacity:1!important;transform:none!important;display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;width:auto!important;min-width:0;box-shadow:none!important;border-radius:16px!important;background:#fff!important}
.main-navbar-wrap .dropdown-menu ul.dropdown-content > li{height:auto!important;min-height:0!important;line-height:normal!important}

/* simple lists: language, currency, profile menu */
.main-navbar-wrap .dropdown-menu ul.drop_cont{padding:8px!important;margin:0!important;min-width:200px}
.main-navbar-wrap .dropdown-menu ul.drop_cont > li{padding:0!important;margin:0!important;border:0!important}
.main-navbar-wrap .dropdown-menu ul.drop_cont > li > a,
.main-navbar-wrap #mainNavbarContent .dropdown-menu ul.drop_cont > li > a{display:flex!important;align-items:center!important;gap:10px;min-height:40px;padding:8px 12px!important;border-radius:10px!important;color:var(--body)!important;font-size:14px!important;font-weight:500!important;line-height:1.3!important;background:transparent!important;white-space:nowrap}
/* language rows: text and flag on the same centre line (custom.css floats the flag with margin-top:10px) */
.main-navbar-wrap #mainNavbarContent .dropdown-menu ul.drop_cont > li > a .languagecls{display:inline!important;line-height:1.3!important;margin:0!important;padding:0!important}
.main-navbar-wrap .dropdown-menu ul.drop_cont > li > a img,
.main-navbar-wrap #mainNavbarContent .dropdown-menu ul.drop_cont > li > a img{display:block!important;width:22px!important;height:22px!important;margin:0 0 0 auto!important;float:none!important;border-radius:50%;object-fit:cover;vertical-align:middle}
.main-navbar-wrap .dropdown-menu ul.drop_cont > li > a:hover,.main-navbar-wrap .dropdown-menu ul.drop_cont > li > a.active{background:var(--blue-tint)!important;color:var(--blue)!important}

/* shopping cart + wishlist */
.main-navbar-wrap .dropdown-menu ul.lisitHart{min-width:340px!important;max-width:360px;padding:0!important;margin:0!important}
.main-navbar-wrap ul#dropdownCart.lisitHart::before{content:"Shopping cart";display:block;padding:14px 18px;font-size:15px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.main-navbar-wrap ul#dropdownwish.lisitHart::before{content:"Wishlist";display:block;padding:14px 18px;font-size:15px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
html[lang="ar"] .main-navbar-wrap ul#dropdownCart.lisitHart::before{content:"سلة التسوق"}
html[lang="ar"] .main-navbar-wrap ul#dropdownwish.lisitHart::before{content:"المفضلة"}
.main-navbar-wrap ul.lisitHart > li{padding:0!important;margin:0!important;border:0!important}
.main-navbar-wrap ul.lisitHartone{max-height:320px;overflow:auto;padding:8px!important;margin:0!important}
.main-navbar-wrap ul.lisitHartone > li{padding:0!important;margin:0!important;border:0!important}
.main-navbar-wrap ul.lisitHartone > li > a{display:grid!important;grid-template-columns:68px 1fr;column-gap:12px;align-items:start;padding:10px!important;border-radius:12px;background:transparent!important}
.main-navbar-wrap ul.lisitHartone > li > a:hover{background:var(--page)!important}
.main-navbar-wrap ul.lisitHartone img{width:68px!important;height:46px!important;object-fit:cover;border-radius:8px!important;margin:0!important;float:none!important}
.main-navbar-wrap .neimiHart{display:flex!important;flex-direction:column;gap:3px;width:auto!important;margin:0!important;padding:0!important;float:none!important}
.main-navbar-wrap .neimiHart1{font-size:14px!important;font-weight:600!important;color:var(--ink)!important;line-height:1.3;white-space:normal}
.main-navbar-wrap .neimiHartUser{font-size:12px!important;color:var(--muted)!important}
.main-navbar-wrap .neimiHartPrice{font-size:14px!important;font-weight:700!important;color:var(--blue)!important}
.main-navbar-wrap ul.lisitHart li.wishBtni{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px 16px!important;border-top:1px solid var(--line)!important;background:#fff!important}
.main-navbar-wrap .pricecountheader{flex:1 1 100%;font-size:18px!important;font-weight:700!important;color:var(--ink)!important;margin:0 0 4px!important;text-align:left!important}
.main-navbar-wrap ul.lisitHart li.wishBtni > a{flex:1;display:flex!important;align-items:center;justify-content:center;height:44px;border-radius:10px!important;background:var(--blue)!important;color:#fff!important;font-weight:600!important;font-size:14px!important;margin:0!important;padding:0 16px!important;border:0!important}
.main-navbar-wrap ul.lisitHart li.wishBtni > a:hover{background:var(--blue-hover)!important}

/* notifications */
.main-navbar-wrap .dropdown-menu .tino{min-width:340px;max-width:380px}
.main-navbar-wrap .dropdown-menu .tino > h4{font-size:15px!important;font-weight:700!important;color:var(--ink)!important;padding:14px 18px!important;margin:0!important;border-bottom:1px solid var(--line);text-align:left!important}
.main-navbar-wrap .dropdown-menu .tino .xbi_new{padding:10px 18px;display:flex;justify-content:space-between;align-items:center}
.main-navbar-wrap .dropdown-menu .tino .xbi_new .wen_xd{font-size:13px!important;font-weight:600!important;color:var(--ink)!important}
.main-navbar-wrap .dropdown-menu .tino .xbi_new a span{color:var(--blue)!important;font-size:13px!important;font-weight:600!important}
.main-navbar-wrap .dropdown-menu ul.dd_list{max-height:340px;overflow:auto;padding:4px 8px 8px!important;margin:0!important}
.main-navbar-wrap .dropdown-menu ul.dd_list > li{padding:0!important;margin:0!important;border:0!important}
.main-navbar-wrap .dropdown-menu ul.dd_list > li > a,.main-navbar-wrap .dropdown-menu ul.dd_list > li > div{display:block;padding:10px 12px!important;border-radius:10px;font-size:13px!important;color:var(--body)!important;line-height:1.45}
.main-navbar-wrap .dropdown-menu ul.dd_list > li > a:hover{background:var(--page)!important}
.main-navbar-wrap .dropdown-menu ul.dd_list > li.lis_lasto{display:flex!important;gap:8px;padding:10px 10px 6px!important;border-top:1px solid var(--line)!important;margin-top:4px!important}
.main-navbar-wrap .dropdown-menu ul.dd_list > li.lis_lasto > a{flex:1;display:inline-flex!important;align-items:center;justify-content:center;height:40px;border-radius:10px!important;border:1px solid var(--blue-soft)!important;color:var(--blue)!important;background:#fff!important;font-size:13px!important;font-weight:600!important;margin:0!important;padding:0 12px!important;box-shadow:none!important}
.main-navbar-wrap .dropdown-menu ul.dd_list > li.lis_lasto > a:last-child{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important}
.main-navbar-wrap .dropdown-menu ul.dd_list > li.lis_lasto > a span.title{border:0!important;background:transparent!important;padding:0!important;margin:0!important;box-shadow:none!important;line-height:1!important;color:inherit!important;font-size:13px!important}

/* apps grid (Course / Student / More from NELC) */
.main-navbar-wrap .dropdown-menu ul.lisitThemeIcon{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px!important;margin:0!important;min-width:280px}
.main-navbar-wrap .dropdown-menu ul.lisitThemeIcon > li{margin:0!important;padding:0!important;border:0!important;width:auto!important}
.main-navbar-wrap .dropdown-menu ul.lisitThemeIcon > li > a{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px!important;border-radius:12px!important;font-size:12px!important;color:var(--body)!important;text-align:center;background:transparent!important}
.main-navbar-wrap .dropdown-menu ul.lisitThemeIcon > li > a:hover{background:var(--blue-tint)!important;color:var(--blue)!important}
.main-navbar-wrap .dropdown-menu ul.lisitThemeIcon > li > a i{font-size:22px!important;color:var(--blue)!important}
.main-navbar-wrap .dropdown-menu ul#dropdownTheme{border-top:1px solid var(--line);padding:8px!important}
.main-navbar-wrap .dropdown-menu ul#dropdownTheme:not(:has(li a)){display:none!important}

/* ============================================================
   LEFT SIDEBAR — dark card like the brandseducation.com student panel
   bg #1A1B22 · 16px radius · white 15px items with outline icons · active #23252E
   ============================================================ */
:root{--sb-bg:#1A1B22;--sb-active:#23252E;--sb-hover:rgba(255,255,255,.06);--sb-line:rgba(255,255,255,.06);--sb-text:#FFFFFF;--sb-muted:#B6B8C2}
.dashboard-wrap .dashboard-menu-col{padding:0 0 0 15px!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;overflow:visible!important}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu{background:var(--sb-bg)!important;border:0!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(20,20,30,.03),0 8px 24px rgba(20,20,30,.08)!important;padding:10px!important;margin:0!important;position:sticky;top:96px;font-family:var(--hd-font)}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li{border:0!important;margin:0 0 2px!important;background:transparent!important;list-style:none}
/* menu items */
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li > a{display:flex!important;align-items:center;gap:12px;min-height:46px;padding:10px 12px!important;border-radius:10px!important;border:0!important;box-shadow:none!important;background:transparent!important;color:var(--sb-text)!important;font-size:15px!important;font-weight:500!important;line-height:1.3;text-transform:none!important;letter-spacing:0!important;transition:background .15s}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li > a:hover{background:var(--sb-hover)!important;color:var(--sb-text)!important}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li.active > a,.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li > a.active{background:var(--sb-active)!important;color:var(--sb-text)!important;font-weight:600!important;border:0!important;box-shadow:none!important}
/* outline icons (CSS masks, white) — the old FontAwesome <i> is hidden; mapped by position, keep the menu order:
   1 Dashboard · 2 Enrolled Courses · 3 Upcoming Online Classes · 4 Review · 5 My Quiz Attempts · 6 My Courses · 7 Logout */
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li > a i{display:none!important}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li > a::before{content:"";width:22px;height:22px;flex:none;background-color:currentColor;-webkit-mask:var(--sb-icon) center/22px 22px no-repeat;mask:var(--sb-icon) center/22px 22px no-repeat}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li:nth-child(1) > a{--sb-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20width=%227%22%20height=%229%22%20x=%223%22%20y=%223%22%20rx=%221%22/%3E%3Crect%20width=%227%22%20height=%225%22%20x=%2214%22%20y=%223%22%20rx=%221%22/%3E%3Crect%20width=%227%22%20height=%229%22%20x=%2214%22%20y=%2212%22%20rx=%221%22/%3E%3Crect%20width=%227%22%20height=%225%22%20x=%223%22%20y=%2216%22%20rx=%221%22/%3E%3C/svg%3E")}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li:nth-child(2) > a{--sb-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2%203h6a4%204%200%200%201%204%204v14a3%203%200%200%200-3-3H2z%22/%3E%3Cpath%20d=%22M22%203h-6a4%204%200%200%200-4%204v14a3%203%200%200%201%203-3h7z%22/%3E%3C/svg%3E")}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li:nth-child(3) > a{--sb-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m22%208-6%204%206%204V8Z%22/%3E%3Crect%20width=%2214%22%20height=%2212%22%20x=%222%22%20y=%226%22%20rx=%222%22%20ry=%222%22/%3E%3C/svg%3E")}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li:nth-child(4) > a{--sb-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolygon%20points=%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22/%3E%3C/svg%3E")}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li:nth-child(5) > a{--sb-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20width=%228%22%20height=%224%22%20x=%228%22%20y=%222%22%20rx=%221%22%20ry=%221%22/%3E%3Cpath%20d=%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d=%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E")}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li:nth-child(6) > a{--sb-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%2010v6M2%2010l10-5%2010%205-10%205z%22/%3E%3Cpath%20d=%22M6%2012v5c3%203%209%203%2012%200v-5%22/%3E%3C/svg%3E")}
.dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li:nth-child(7) > a{--sb-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22/%3E%3Cpolyline%20points=%2216%2017%2021%2012%2016%207%22/%3E%3Cline%20x1=%2221%22%20x2=%229%22%20y1=%2212%22%20y2=%2212%22/%3E%3C/svg%3E")}
@media (max-width:991.98px){
  .dashboard-wrap .dashboard-menu-col{flex:0 0 100%!important;max-width:100%!important;padding:0 15px!important;margin-bottom:16px}
  .dashboard-wrap .dashboard-menu-col ul.dashboard-menu{position:static;display:flex;gap:6px;overflow-x:auto;padding:8px!important;border-radius:14px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dashboard-wrap .dashboard-menu-col ul.dashboard-menu::-webkit-scrollbar{display:none}
  .dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li{margin:0!important;flex:none}
  .dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li > a{white-space:nowrap;min-height:40px;padding:8px 14px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.12)!important;font-size:14px!important}
  .dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li > a::before{width:18px;height:18px;-webkit-mask-size:18px 18px;mask-size:18px 18px}
  .dashboard-wrap .dashboard-menu-col ul.dashboard-menu > li.active > a{border-color:transparent!important}
}

/* ---------- STAT CARDS ---------- */
.dashboard-wrap .dashboard-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-card)!important;box-shadow:none!important;padding:20px!important;align-items:center;gap:14px;transition:box-shadow .2s,transform .2s}
.dashboard-wrap .dashboard-card:hover{box-shadow:var(--shadow)!important;transform:translateY(-2px)}
.dashboard-wrap .dashboard-card .card-icon span{width:52px!important;height:52px!important;border-radius:14px!important;background:var(--blue-tint)!important;color:var(--blue)!important;display:inline-flex!important;align-items:center;justify-content:center}
.dashboard-wrap .dashboard-card .card-icon span i{color:var(--blue)!important;font-size:24px!important}
.dashboard-wrap .dashboard-card .text-value h4{font-size:28px!important;font-weight:700!important;color:var(--ink)!important;margin:0 0 2px!important;line-height:1.1}
.dashboard-wrap .dashboard-card .card-info a{color:var(--muted)!important;font-size:14px!important;font-weight:500!important}
.dashboard-wrap .dashboard-card .card-info a:hover{color:var(--blue)!important}

/* ---------- SECTION TITLES ---------- */
.dashboard-wrap .sidemm h3,.dashboard-wrap .sidemm h2{font-size:22px!important;font-weight:600!important;color:var(--ink)!important;margin:8px 0 16px!important}

/* ---------- COURSE CARDS ---------- */
/* the card is a grid so the bare "16%" text node that follows .progress becomes an anonymous grid item on the right of the bar */
.dashboard-wrap .coursebox{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-card)!important;box-shadow:none!important;overflow:hidden;transition:box-shadow .2s,transform .2s;display:grid!important;grid-template-columns:minmax(0,1fr) auto 18px;grid-template-rows:1fr auto auto;align-items:center;column-gap:10px;height:100%;margin-bottom:0;padding:0 0 14px!important;font-size:12px;font-weight:600;color:var(--muted);font-family:var(--hd-font)}
.dashboard-wrap .sidemm .row > .col-4{padding-bottom:24px}
.dashboard-wrap .coursebox > a.course_detail_id{grid-column:1/-1;grid-row:1;align-self:start;font-size:15px;font-weight:400;color:var(--body)}
.dashboard-wrap .coursebox:hover{box-shadow:var(--shadow)!important;transform:translateY(-2px)}
.dashboard-wrap .coursebox .coursebox-img{position:relative;overflow:hidden}
.dashboard-wrap .coursebox .coursebox-img > img{width:100%;height:190px!important;object-fit:cover;display:block;transition:transform .4s}
.dashboard-wrap .coursebox:hover .coursebox-img > img{transform:scale(1.03)}
.dashboard-wrap .coursebox .author-block{background:linear-gradient(to top,rgba(20,21,31,.85),rgba(20,21,31,0))!important;padding:28px 14px 12px!important;display:grid!important;grid-template-columns:36px 1fr;column-gap:10px;align-items:center;left:0!important;right:0!important;bottom:0!important;width:100%!important}
.dashboard-wrap .coursebox .author-block > img{position:static!important;grid-row:1/3;width:36px!important;height:36px!important;object-fit:cover;margin:0!important;border:2px solid #fff!important;border-radius:50%!important}
.dashboard-wrap .coursebox .author-block .authorname{grid-column:2;grid-row:1;align-self:end;font-weight:600!important;font-size:13px!important;color:#fff!important;line-height:1.2;margin:0!important;padding:0!important}
.dashboard-wrap .coursebox .author-block .description{grid-column:2;grid-row:2;align-self:start;font-size:12px!important;font-weight:400!important;color:#fff!important;opacity:.85;line-height:1.3;margin:0!important;padding:0!important}
.dashboard-wrap .coursebox .coursebox-body{padding:16px 18px 6px!important}
.dashboard-wrap .coursebox .coursebox-body h4{font-size:17px!important;font-weight:600!important;color:var(--ink)!important;line-height:1.35;margin:0 0 6px!important}
.dashboard-wrap .coursebox .course-caption p{font-size:14px!important;color:var(--muted)!important;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 10px!important;white-space:normal!important}
.dashboard-wrap .coursebox .coursebox-body > .description{font-size:18px!important;font-weight:700!important;color:var(--ink)!important;margin:0 0 10px!important}
.dashboard-wrap .coursebox .coursebox-body > .description .sale_price_ing,.dashboard-wrap .coursebox .coursebox-body > .description del,.dashboard-wrap .coursebox .coursebox-body > .description s{font-size:13px!important;font-weight:500!important;color:var(--muted)!important;text-decoration:line-through;margin-left:6px}
.dashboard-wrap .coursebox .classstats{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 6px}
.dashboard-wrap .coursebox .classstats > div{background:var(--page)!important;border:1px solid var(--line)!important;border-radius:999px!important;padding:4px 10px!important;font-size:12px!important;color:var(--body)!important;display:inline-flex;align-items:center;gap:6px;margin:0!important;width:auto!important;flex:none}
.dashboard-wrap .coursebox .classstats > div i{color:var(--blue)!important}
.dashboard-wrap .coursebox .coursebtn{grid-column:1/-1;grid-row:2;display:flex!important;gap:10px;padding:10px 18px 14px!important;margin:0!important}
.dashboard-wrap .coursebox .coursebtn a.btn{flex:1;border-radius:var(--r-btn)!important;font-size:14px!important;font-weight:600!important;padding:10px 12px!important;line-height:1.3;box-shadow:none!important;margin:0!important;white-space:nowrap}
.dashboard-wrap .coursebox .coursebtn a.btn:first-child{background:#fff!important;color:var(--blue)!important;border:1px solid var(--blue-soft)!important}
.dashboard-wrap .coursebox .coursebtn a.btn:first-child:hover{background:var(--blue-tint)!important}
.dashboard-wrap .coursebox .coursebtn a.btn:last-child{background:var(--blue)!important;color:#fff!important;border:1px solid var(--blue)!important}
.dashboard-wrap .coursebox .coursebtn a.btn:last-child:hover{background:var(--blue-hover)!important;border-color:var(--blue-hover)!important}
.dashboard-wrap .coursebox > .progress{grid-column:1;grid-row:3;height:8px!important;margin:0 0 0 18px!important;border-radius:999px!important;background:#E6E9EE!important;overflow:hidden}
.dashboard-wrap .coursebox > .progress .progress-bar{background:linear-gradient(90deg,#2BB3BD,#137A82)!important;border-radius:999px!important;height:8px!important;font-size:0!important;color:transparent!important;transition:width .4s}

/* generic buttons used across pages */
.dashboard-wrap .btn-buygreen,.dashboard-wrap .btn-primary,.dashboard-wrap .btn-success,.dashboard-wrap .btn-danger,.dashboard-wrap .btn-info{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important;border-radius:var(--r-btn)!important;font-weight:600!important;box-shadow:none!important}
.dashboard-wrap .btn-buygreen:hover,.dashboard-wrap .btn-primary:hover,.dashboard-wrap .btn-success:hover,.dashboard-wrap .btn-danger:hover,.dashboard-wrap .btn-info:hover{background:var(--blue-hover)!important;border-color:var(--blue-hover)!important}
.dashboard-wrap .btn-outline-primary,.dashboard-wrap .btn-outline-secondary{color:var(--blue)!important;border-color:var(--blue-soft)!important;background:#fff!important;border-radius:var(--r-btn)!important}

/* ---------- TABLES (Enrolled courses) ---------- */
.dashboard-wrap .sidemm > .table,.dashboard-wrap .sidemm table.table{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-card);overflow:hidden;border-collapse:separate!important;border-spacing:0;margin:0}
.dashboard-wrap .sidemm > .table + .dataTables_wrapper{margin-top:24px}
.dashboard-wrap table.table th,.dashboard-wrap table.table td{border:0!important;border-bottom:1px solid var(--line)!important;vertical-align:middle!important;padding:16px!important}
.dashboard-wrap table.table thead th{background:var(--page)!important;color:var(--muted)!important;font-size:12px!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.04em}
.dashboard-wrap table.table tbody tr:last-child td{border-bottom:0!important}
.dashboard-wrap table.table tbody tr:hover td{background:#FBFCFD}
.dashboard-wrap table.table td img{border-radius:10px!important;width:96px;height:64px;object-fit:cover}
.dashboard-wrap table.table td p.mb-3{font-size:15px!important;font-weight:600!important;color:var(--ink)!important;margin:0 0 6px!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dashboard-wrap table.table .badge{border-radius:999px!important;font-size:11px!important;font-weight:600!important;padding:4px 10px!important;text-transform:capitalize}
.dashboard-wrap table.table .badge-success{background:var(--ok-tint)!important;color:var(--ok)!important}
.dashboard-wrap table.table .badge-info,.dashboard-wrap table.table .badge-primary{background:var(--blue-tint)!important;color:var(--blue)!important}
.dashboard-wrap table.table .badge-warning{background:var(--warn-tint)!important;color:var(--warn)!important}
.dashboard-wrap table.table td p.text-muted{font-size:13px!important;color:var(--muted)!important;margin:0 0 10px!important}
.dashboard-wrap table.table .progress{height:6px!important;border-radius:999px!important;background:var(--line)!important;max-width:260px}
.dashboard-wrap table.table .progress .progress-bar{background:var(--blue)!important;border-radius:999px}
.dashboard-wrap table.table td a.btn{border-radius:var(--r-btn)!important;font-size:13px!important;font-weight:600!important;padding:8px 14px!important;margin:0 6px 0 0!important;box-shadow:none!important;display:inline-flex;align-items:center;gap:6px}
.dashboard-wrap table.table td a.btn:first-child{background:#fff!important;color:var(--blue)!important;border:1px solid var(--blue-soft)!important}
.dashboard-wrap table.table td a.btn:first-child:hover{background:var(--blue-tint)!important}
.dashboard-wrap table.table td a.btn:last-child{background:var(--blue)!important;color:#fff!important;border:1px solid var(--blue)!important}
.dashboard-wrap table.table td a.btn:last-child:hover{background:var(--blue-hover)!important}
.dashboard-wrap .table-responsive{overflow:visible}

/* ---------- DataTables (Upcoming online classes) ---------- */
.dashboard-wrap .dataTables_wrapper{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
.dashboard-wrap .dataTables_wrapper .dataTables_length select,
.dashboard-wrap .dataTables_wrapper .dataTables_filter input,
.dashboard-wrap .sidemm select.form-control,.dashboard-wrap .sidemm select{border:1px solid var(--line)!important;border-radius:8px!important;padding:6px 10px!important;height:36px;background:#fff!important;color:var(--body)!important;font-size:14px!important;box-shadow:none!important}
.dashboard-wrap .dataTables_wrapper .dataTables_filter input:focus,.dashboard-wrap .sidemm select:focus{border-color:var(--blue)!important;outline:0;box-shadow:0 0 0 3px rgba(46,106,142,.15)!important}
.dashboard-wrap .dataTables_wrapper table.dataTable{border:0!important;margin:12px 0!important}
.dashboard-wrap .dataTables_wrapper table.dataTable thead th{background:var(--page)!important;color:var(--muted)!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)!important;padding:12px!important}
.dashboard-wrap .dataTables_wrapper table.dataTable tbody td{padding:12px!important;border-bottom:1px solid var(--line)!important;font-size:14px;color:var(--body)}
.dashboard-wrap .dataTables_wrapper .dataTables_info,.dashboard-wrap .dataTables_wrapper .dataTables_length,.dashboard-wrap .dataTables_wrapper .dataTables_filter{color:var(--muted)!important;font-size:13px!important}
.dashboard-wrap .dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:8px!important;border:1px solid var(--line)!important;background:#fff!important;color:var(--body)!important;padding:6px 12px!important;margin:0 2px!important}
.dashboard-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important}
.dashboard-wrap table.dataTable tbody td .btn{border-radius:8px!important;background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}

/* ---------- EMPTY STATE ---------- */
.dashboard-wrap .sidemm .text-center img,.dashboard-wrap .sidemm img[src*="nothing"],.dashboard-wrap .sidemm img[src*="no-data" i],.dashboard-wrap .sidemm img[src*="empty" i]{max-width:280px;opacity:.9}
.dashboard-wrap .sidemm h2,.dashboard-wrap .sidemm h3{text-align:inherit}
.dashboard-wrap .sidemm .nothing-here h2,.dashboard-wrap .sidemm .text-center h2,.dashboard-wrap .sidemm .text-center h3{font-size:20px!important;font-weight:600!important;color:var(--ink)!important;margin:16px 0 6px!important}
.dashboard-wrap .sidemm .text-center p{color:var(--muted)!important;font-size:14px!important}

/* ---------- FOOTER ---------- */
#footer{background:#fff!important;border-top:1px solid var(--line)!important;margin-top:32px}
#footer .fotCopy{padding:20px 0!important;font-size:13px!important;color:var(--muted)!important}
#footer .fotCopy a{color:var(--body)!important;font-size:13px!important}
#footer .fotCopy a:hover{color:var(--blue)!important}
#footer .fotCopy img{filter:grayscale(1);opacity:.75;height:22px;width:auto}
.bxfottheme{display:none}

/* ---------- MODALS / ALERTS ---------- */
.modal .modal-content{border:0!important;border-radius:16px!important;box-shadow:0 24px 60px rgba(20,21,31,.25)!important;overflow:hidden}
.modal .modal-header{border-bottom:1px solid var(--line)!important;padding:18px 22px!important}
.modal .modal-header .modal-title,.modal .modal-header h4,.modal .modal-header h5{font-size:18px!important;font-weight:600!important;color:var(--ink)!important}
.modal .modal-body{padding:22px!important;color:var(--body)}
.modal .modal-footer{border-top:1px solid var(--line)!important;padding:14px 22px!important}
.modal .btn-primary,.modal .btn-success,.modal .btn-danger{background:var(--blue)!important;border-color:var(--blue)!important;border-radius:var(--r-btn)!important;font-weight:600!important}
.modal .btn-secondary,.modal .btn-default,.modal .btn-light{background:#fff!important;color:var(--body)!important;border:1px solid var(--line)!important;border-radius:var(--r-btn)!important}
.modal .close{color:var(--muted)!important;opacity:1!important;text-shadow:none!important}
.sweet-alert{border-radius:16px!important;box-shadow:0 24px 60px rgba(20,21,31,.25)!important}
.sweet-alert h2{color:var(--ink)!important;font-weight:600!important;font-size:22px!important}
.sweet-alert p{color:var(--muted)!important}
.sweet-alert button.confirm{background:var(--blue)!important;border-radius:var(--r-btn)!important;box-shadow:none!important;font-weight:600!important}
.sweet-alert button.cancel{background:#fff!important;color:var(--body)!important;border:1px solid var(--line)!important;border-radius:var(--r-btn)!important;box-shadow:none!important}

/* ---------- FORMS (profile, review, filters) ---------- */
.dashboard-wrap .form-control,.dashboard-wrap input[type=text],.dashboard-wrap input[type=email],.dashboard-wrap textarea{border:1px solid var(--line)!important;border-radius:var(--r-btn)!important;padding:10px 12px!important;font-size:14px!important;color:var(--ink)!important;box-shadow:none!important;background:#fff!important}
.dashboard-wrap .form-control:focus,.dashboard-wrap textarea:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(46,106,142,.15)!important}
.dashboard-wrap label{font-size:13px;font-weight:600;color:var(--body)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:991.98px){
  .dashboard-wrap .sidemm{flex:0 0 100%!important;max-width:100%!important}
  .dashboard-wrap .sidemm .row > .col-4{flex:0 0 50%!important;max-width:50%!important}
}
@media (max-width:767.98px){
  .dashboard-wrap .sidemm .row > .col-4{flex:0 0 100%!important;max-width:100%!important}
  .dashboard-wrap .dashboard-card .text-value h4{font-size:24px!important}
  .dashboard-wrap table.table td,.dashboard-wrap table.table th{padding:12px!important}
  .dashboard-wrap table.table td a.btn{margin:0 0 6px!important;display:flex;justify-content:center}
}

/* progress bars are only 6px tall — hide the percentage text inside them */
.dashboard-wrap .progress .progress-bar{font-size:0!important;color:transparent!important}

/* ============================================================
   COURSE PLAYER (course.brandseducation.com/courses/.../lecture/...)
   Already skinned by lecture-modern-brands.css — only re-colour it.
   Red accent (#E23744 and its pink tints) -> BRANDS blue.
   ============================================================ */
.lecture-header{border-bottom:1px solid var(--line)!important;box-shadow:none!important;background:#fff!important}
.lecture-header .nav-btn{border-radius:10px!important;font-weight:600!important;box-shadow:none!important}
.lecture-header #lecture_complete_button.nav-btn,
.lecture-header #lecture_complete_button.nav-btn:hover{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.lecture-header #lecture_complete_button.nav-btn:hover{background:var(--blue-hover)!important}
.lecture-header #lecture_previous_button.nav-btn{background:#fff!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.discusion-calltoaction-wrap{background:var(--navy)!important;border-radius:14px!important}
.discusion-calltoaction-wrap i,.discusion-calltoaction-wrap .la,.discusion-calltoaction-wrap svg{color:#B9D4E6!important}
.discussion-ask-question-form{border:1px solid var(--line)!important;border-radius:14px!important;background:#fff!important}
.discussion-ask-question-form .form-control{border:1px solid var(--line)!important;border-radius:10px!important}
.discussion-ask-question-form .form-control:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(46,106,142,.15)!important}
button.btn.btn-purple,a.btn.btn-purple{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important;border-radius:10px!important;font-weight:600!important;box-shadow:none!important}
button.btn.btn-purple:hover,a.btn.btn-purple:hover{background:var(--blue-hover)!important;border-color:var(--blue-hover)!important}
.ai-fab{background:var(--navy)!important;border-radius:999px!important}
/* sidebar: progress bar + active lecture highlight */
.lecture-sidebar .progress .progress-bar,.course-sidebar .progress .progress-bar,[class*="lecture"] .progress .progress-bar{background:var(--blue)!important}
[class*="lecture"] .active,[class*="lecture"] .current,[class*="lecture"] li.active > a,[class*="lecture"] .is-active{background:var(--blue-tint)!important;color:var(--blue)!important;border-color:var(--blue-soft)!important}

/* ============================================================
   ARSHAD-112/113 (2026-10-30) - local additions found while testing on this site.
   (Also fixed in the file above: the sidebar icon selectors read li:nth-child(1 > a - closing bracket added.)
   This file is linked only for institute 14 (header.blade.php / lecture.blade.php).
   ============================================================ */
/* (1) under 992px the avatar menu holds every dashboard page - hide the dark pill bar (no double menu) */
@media (max-width:991.98px){ .dashboard-wrap .dashboard-menu-col{display:none!important} }

/* (2) this site runs SweetAlert 2.x (.swal-modal / .swal-button--*), not 1.x .sweet-alert */
.swal-modal{border-radius:16px!important;box-shadow:0 24px 60px rgba(20,21,31,.25)!important}
.swal-title{color:var(--ink)!important;font-weight:600!important;font-size:22px!important}
.swal-text{color:var(--muted)!important}
.swal-button{border-radius:var(--r-btn)!important;font-weight:600!important;box-shadow:none!important}
.swal-button--confirm,.swal-button--danger{background:var(--blue)!important;color:#fff!important}
.swal-button--confirm:not([disabled]):hover,.swal-button--danger:not([disabled]):hover{background:var(--blue-hover)!important}
.swal-button--cancel{background:#fff!important;color:var(--body)!important;border:1px solid var(--line)!important}
.swal-button:focus{box-shadow:0 0 0 3px rgba(46,106,142,.25)!important}

/* (3) dropdowns flush with the icon edge (custom.css has an id rule right:5px!important), mirrored in
   Arabic. Under 576px the cart / wishlist / chat / bell panels span the screen under the 60px header
   (the avatar menu has its own fixed position in section 11). */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown > .dropdown-menu{right:0!important;left:auto!important}
html[dir="rtl"] .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li > .dropdown > .dropdown-menu{right:auto!important;left:0!important}
@media (max-width:575.98px){
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li:not(.vsn_vx) > .dropdown > .dropdown-menu,
  html[dir="rtl"] .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li:not(.vsn_vx) > .dropdown > .dropdown-menu{position:fixed!important;top:66px!important;left:12px!important;right:12px!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:calc(100vh - 78px)!important;overflow:auto!important;margin-top:0!important}
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li:not(.vsn_vx) > .dropdown > .dropdown-menu ul.lisitHart,.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li:not(.vsn_vx) > .dropdown > .dropdown-menu .tino{min-width:0!important;max-width:none!important;width:auto!important}
}
/* (3b) Arabic: the avatar menu opens from the left edge */
@media (max-width:991.98px){
  html[dir="rtl"] .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.vsn_vx > .dropdown > .dropdown-menu,
  html[dir="rtl"] .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.vsn_vx .dropdown-menu.show{right:auto!important;left:12px!important}
}

/* (4) template ARSHAD-113: rows only needed on mobile (language switch, header menu links such as
   "Become a tutor") - on desktop they are already in the header */
@media (min-width:992px){ .main-navbar-wrap #mainNavbarContent li.vsn_vx ul#dropdownone.drop_cont > li.hdp-mob{display:none!important} }

/* (5) template ARSHAD-112: a 0 chat badge is printed with .hd-zero - hide it (id beats custom.css) */
.main-navbar-wrap #mainNavbarContent #totalmessage.hd-zero{display:none!important}

/* (6) template ARSHAD-112: no photo -> the initial, like brandseducation.com */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap li.vsn_vx .hd-initial{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#2BB3BD,#137A82);color:#fff;font:700 16px/1 var(--hd-font);text-transform:uppercase}

/* (7) widths found while testing:
   - the 54px logo + the date chip + the icon circles need ~1130px, so between 992 and 1199px the
     date chip is hidden to keep the header on one row (it shows from 1200px);
   - below 992px the full-width tab row is forced on above; the avatar menu holds those pages now. */
@media (min-width:992px) and (max-width:1199.98px){
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.btn_timing{display:none!important}
}
@media (max-width:991.98px){
  .main-navbar-wrap .containerMain > #mainNavbarContent ~ ul.menuNav.menuDecktop{display:none!important}
}

/* (8) avatar menu scrolls on short screens: the generic dropdown rule sets max-height:none +
   overflow:visible !important on the inner list, so the scroll lives on the panel itself.
   dvh = the visible height on phones (browser bars excluded); vh is the fallback. */
.main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.vsn_vx > .dropdown > .dropdown-menu{max-height:calc(100vh - 96px)!important;max-height:calc(100dvh - 96px)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-width:991.98px){
  .main-navbar-wrap #mainNavbarContent ul.main-nav-auth-profile-wrap > li.vsn_vx > .dropdown > .dropdown-menu{max-height:calc(100vh - 78px)!important;max-height:calc(100dvh - 78px)!important}
}
/* FIX-01 (31 Oct 2026): below 992px each dashboard table scrolls inside its own card (the .table-responsive{overflow:visible} above and html/body overflow-x:clip stopped any sideways scroll); the filter box (a table with a select) is left alone; desktop unchanged */
@media (max-width:991.98px){
  .dashboard-wrap .dataTables_wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dashboard-wrap .sidemm > table.table:not(:has(select)){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}