/**
 * global.css — Global CSS foundation
 *
 * This file provides CSS custom properties (variables) with sensible defaults
 * that mirror the dynamic design tokens generated by Home/style.ctp.
 * The dynamic values from Home/style.ctp will override these defaults at runtime.
 *
 * Load this file BEFORE Home/style.ctp in layout heads.
 */

/* ===================================================================
   CSS Custom Properties (Design Tokens)
   =================================================================== */
:root {
	/* --- Typography --- */
	--font-family: 'Lato', sans-serif;
	--font-size-home: 16;

	/* --- Body --- */
	--body-color: #333333;
	--body-bk-color: #FFFFFF;

	/* --- Header --- */
	--header-bk-color: #FFFFFF;
	--header-text-color: #000000;
	--header-font-hover-color: #1867C0;

	/* --- Navigation / Sidebar --- */
	--nav-footer-bk-color: #4285f4;
	--nav-trans-lnk-color: #2C3E50;
	--nav-solid-lnk-color: #FFFFFF;
	--director-sidebar-bk-color: #343A40;
	--lnk-trans-hover-color: #34495E;
	--lnk-solid-hover-color: #FFFFFF;

	/* --- Sidebar Submenu --- */
	--side-sub-lnk-trans-color: #2C3E50;
	--side-sub-lnk-solid-color: #FFFFFF;
	--side-sub-lnk-trans-hover-color: #34495E;
	--side-sub-lnk-solid-hover-color: #FFFFFF;

	/* --- Buttons --- */
	--button-lnk-color: #4285f4;
	--btn-link-text-color: #FFFFFF;
	--btn-nsb-color: #4285f4;
	--btn-nsb-hover-color: #3367D6;
	--btn-new-color: #4CAF50;
	--btn-new-hover-color: #43A047;
	--btn-del-color: #F44336;
	--btn-del-hover-color: #D32F2F;
	--btn-action-color: #4285f4;
	--btn-font-hover-color: #FFFFFF;

	/* --- Active Button States --- */
	--active-button-back-color: #4285f4;
	--active-btn-text-color: #FFFFFF;
	--active-btn-color-hover: #3367D6;
	--active-btn-text-color-hover: #FFFFFF;

	/* --- Tile / Grid Buttons --- */
	--btn-tile-grid-bk-color: #EEF5FF;
	--btn-tile-grid-hover-color: #D6E8FF;
	--btn-tile-grid-color: #333333;

	/* --- Headings --- */
	--head-tag-color: #333333;
	--h2-font-color: #333333;
	--h3-font-color: #333333;
	--h4-font-color: #333333;
	--h5-font-color: #333333;
	--h6-font-color: #333333;

	/* --- Icons --- */
	--icon-font-color: #000000;
	--icon-hover-color: #1867C0;
	--head-icon-font-color: #000000;
	--head-icon-hover-color: #1867C0;
	--soc-icon-font-color: #333333;
	--soc-icon-hover-color: #1867C0;
	--frame-icon-font-color: #000000;

	/* --- Slider --- */
	--slider-font-color: #FFFFFF;
	--slider-tab-bk-color: #4285f4;
	--slider-tab-text-color: #FFFFFF;

	/* --- Footer --- */
	--footer-font-color: #FFFFFF;
	--footer-font-hover-color: #CCCCCC;

	/* --- Course --- */
	--course-head-subtitle-color: #333333;
	--home-head-subtitle-color: #333333;
	--course-type-bk-color: #FFFFFF;
	--course-type-bk-hover-color: #EEF5FF;

	/* --- Video --- */
	--video-player-color: #4285f4;
}

/* ===================================================================
   Design System — dynamic-aware rules (use CSS custom properties)
   Migrated from Home/style.ctp — NO !important
   =================================================================== */

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family);
}

h1 { color: var(--head-tag-color); }
h2 { color: var(--h2-font-color); }
h3 { color: var(--h3-font-color); }
h4 { color: var(--h4-font-color); }
h5 { color: var(--h5-font-color); }
h6 { color: var(--h6-font-color); }

/* --- Icons --- */
i { color: var(--icon-font-color); }
i:hover { color: var(--icon-hover-color); }

.navbar_top span.fa,
.navbar_top i { color: var(--head-icon-font-color); }

.navbar_top span.fa:hover,
.navbar_top i:hover { color: var(--head-icon-hover-color); }

.header-top-cta span.fa,
.header-top-cta i { color: var(--head-icon-font-color); }

.header-top-cta span.fa:hover,
.header-top-cta i:hover { color: var(--head-icon-hover-color); }

#top-panel i { color: var(--frame-icon-font-color); }

.navbar span.fas,
.navbar i,
#quicklinkmodal i,
.media_icons i { color: var(--head-icon-font-color); }

.navbar span.fas:hover,
.navbar i:hover,
#quicklinkmodal i:hover,
.media_icons i:hover,
.show_my_media_link i:hover { color: var(--head-icon-hover-color); }

.social_icon a { color: var(--soc-icon-font-color); }
.social_icon a:hover { color: var(--soc-icon-hover-color); }

/* --- Body & Backgrounds --- */
.top-user-section {
	background: var(--body-bk-color);
	color: var(--body-color);
}

#page-content-wrapper,
.wrapper,
.login-part-section,
.section-box.dashboard_block {
	background: var(--body-bk-color);
}

.body-modal-box .modal-content { background: var(--body-bk-color); }

/* --- Header --- */
.navbar_top,
.header_bg,
.affix,
.show_list_cta,
#top-panel,
.header_drop { background: var(--header-bk-color); }

.new-body .header_bg .navbar_top { background: var(--header-bk-color); }

.trainee-wrapper,
.trainee-wrapper #slide-out,
#director-header { background: var(--header-bk-color); }

@media (max-width: 767.8px) {
	nav#topbar { background: var(--header-bk-color); }
}

.checkout_form_bg {
	background: var(--header-bk-color);
	color: var(--header-text-color);
}

.modal-header-top { background: var(--header-bk-color); }

ul.header_text_color li a,
.show_list_cta a,
.header-logo-name { color: var(--header-text-color); }

.nav.navbar-nav li a,
.navbar.double-nav a,
.md-tabs a { color: var(--header-text-color); }

.nav.navbar-nav li a:hover,
.navbar.double-nav a:hover,
.md-tabs a:hover { color: var(--header-font-hover-color); }

.sign-upp .dropdown-menu li a:hover,
.sign-upp .dropdown-menu li a:focus,
ul.header_text_color li a:hover,
.show_list_cta a:hover {
	background: var(--lnk-trans-hover-color);
	color: var(--lnk-solid-hover-color);
}

.lang-changer li a:hover {
	background: var(--lnk-trans-hover-color);
	color: var(--lnk-solid-hover-color);
}

.drop-changer li a:hover {
	background: var(--lnk-trans-hover-color);
	color: var(--lnk-solid-hover-color);
}

.navbar .header_drop a:hover,
.navbar .header_drop a:focus {
	background: var(--lnk-trans-hover-color);
	color: var(--lnk-solid-hover-color);
}

.orange_btn_lan { color: var(--header-text-color); }

.navbar-default .dropdown-menu.notify-drop .notify-drop-title { color: var(--header-text-color); }
#navbarDropdownMenuLink { color: var(--header-text-color); }

.treeview-animated .treeview-animated-list .treeview-animated-element.opened,
.treeview-animated .treeview-animated-list .treeview-animated-element:hover {
	background-color: var(--head-icon-hover-color);
}

#productdescription .treeview-animated-element { cursor: default; }

/* --- Sidebar / Navigation --- */
.sidenav,
.sidenav .user-info { background: var(--nav-trans-lnk-color); }

.sidenav li a {
	background: var(--nav-trans-lnk-color);
	color: var(--nav-solid-lnk-color);
}

.user-info a span,
.user-info a,
.user-info p {
	background: var(--nav-trans-lnk-color);
	color: var(--nav-solid-lnk-color);
}

.user-info .caret { border-top: 4px solid var(--nav-solid-lnk-color); }

#mySidenav .user-info .dropdown-menu a:hover {
	background: var(--side-sub-lnk-trans-hover-color);
	color: var(--side-sub-lnk-solid-hover-color);
}

.user-info ul { background: var(--side-sub-lnk-trans-color); }

.user-info ul li a {
	background: var(--side-sub-lnk-trans-color);
	color: var(--side-sub-lnk-solid-color);
}

.sidenav li.activef a {
	background: var(--lnk-trans-hover-color);
	color: var(--lnk-solid-hover-color);
}

.sidenav li a:hover {
	background: var(--lnk-trans-hover-color);
	color: var(--lnk-solid-hover-color);
}

.sidenav li ul.sub-menu a,
.blank_li {
	background: var(--side-sub-lnk-trans-color);
	color: var(--side-sub-lnk-solid-color);
}

.sidenav li ul.sub-menu a:hover {
	background: var(--side-sub-lnk-trans-hover-color);
	color: var(--side-sub-lnk-solid-hover-color);
}

.sidenav li ul.sub-menu li.activef a {
	background: var(--side-sub-lnk-trans-hover-color);
	color: var(--side-sub-lnk-solid-hover-color);
}

.side-nav .side_bar_text { color: var(--nav-solid-lnk-color); }
.side-nav .side_bar_text::placeholder { color: var(--nav-solid-lnk-color); }

#sidebar i { color: var(--nav-solid-lnk-color); }
.sidebar-i { color: var(--nav-solid-lnk-color); }
#sidebar i:hover { color: var(--lnk-trans-hover-color); }

.side-nav .collapsible li a:hover,
.connection-tab-list .active > a { background: var(--lnk-trans-hover-color); }

.rgba-blue-strong,
.rgba-blue-strong::after {
	background-color: var(--nav-footer-bk-color) !important;
	background: var(--nav-footer-bk-color) !important;
}

.dropdown-menu.user-side { background: var(--nav-trans-lnk-color); }

.dropdown-menu.user-side a {
	color: var(--nav-solid-lnk-color);
	line-height: 24px;
	height: 40px;
}

.dropdown-menu.user-side a:hover {
	background: var(--side-sub-lnk-trans-hover-color);
	color: var(--side-sub-lnk-solid-hover-color);
}

.collapsible-body {
	background: var(--side-sub-lnk-trans-color);
	color: var(--side-sub-lnk-solid-color);
}

.side-nav .collapsible .collapsible-body ul li a:hover {
	background: var(--side-sub-lnk-trans-hover-color);
	color: var(--side-sub-lnk-solid-hover-color);
}

.menuslide_ic {
	background: var(--nav-trans-lnk-color);
	color: var(--nav-solid-lnk-color);
}

.menuslide_ic:hover {
	background: var(--lnk-trans-hover-color);
	color: var(--lnk-solid-hover-color);
}

.trainee-wrapper { height: 100vh; }

/* --- Footer --- */
.copyright { background: var(--nav-footer-bk-color); }
.footer, footer { background: var(--nav-footer-bk-color); }
.copyright p { color: var(--footer-font-color); }

footer.page-footer,
.footer-copyright,
footer h5,
footer a { color: var(--footer-font-color); }

footer.page-footer a:hover { color: var(--footer-font-hover-color); }

/* --- Footer redesign: module titles, circular social, software credit --- */
/* Colors stay driven by the configurable footer vars; only structure here. */
.footer-col-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 18px;
	color: var(--footer-font-color);
}
.footer-suite-list,
.footer-link-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-suite-list li,
.footer-link-list li { margin-bottom: 10px; }
.footer-suite-list a,
.footer-link-list a { color: var(--footer-font-color); text-decoration: none; }
.footer-suite-list a:hover,
.footer-link-list a:hover { color: var(--footer-font-hover-color); }

/* Circular social icon set (LinkedIn / Instagram / YouTube / X) */
.footer-social {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--soc-icon-font-color, var(--footer-font-color));
	font-size: 16px;
	transition: background 0.2s ease, color 0.2s ease;
}
.footer-social a:hover {
	background: rgba(255, 255, 255, 0.18);
	color: var(--soc-icon-hover-color, var(--footer-font-hover-color));
}
.footer-social.is-center { justify-content: center; margin: 6px 0 4px; }

/* "Software by onplus.io" credit — bottom-left, plain */
.software-credit {
	display: block;
	font-size: 13px;
	color: var(--footer-font-color);
	opacity: 0.9;
}

/* Public/SuperAdmin footer (footer.ctp) — 4 columns, col 1 double width.
   Equal-height columns so the col-1 "Software by onplus.io" credit and the
   col-4 social icons sit on the same bottom line (via margin-top:auto). */
.pf-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 32px 48px;
	padding: 40px 8px 24px;
}
.pf-col {
	display: flex;
	flex-direction: column;
	flex: 1 1 160px;
	min-width: 150px;
}
.pf-col-wide { flex: 2 1 320px; }
/* When the fixed left chrome sidebar is present (body.fixed-sn), offset the
   footer so its content isn't crushed under it. Login (no sidebar) is unaffected. */
body.fixed-sn .pf-grid { padding-left: 72px; padding-right: 24px; }
@media (max-width: 767px) {
	body.fixed-sn .pf-grid { padding-left: 16px; padding-right: 16px; }
}
.pf-col .pf-bottom { margin-top: auto; padding-top: 20px; }
.pf-col .footer_logo { margin-bottom: 14px; }
.pf-col .footer-p { margin-bottom: 0; }
.pf-logo { margin-bottom: 14px; }
.pf-logo img { max-height: 60px; width: auto; max-width: 100%; height: auto; object-fit: contain; }
.pf-text { line-height: 1.7; }
.pf-text p { margin-bottom: 8px; }
.pf-text ul { list-style: none; padding: 0; margin: 0; }
.pf-text li { margin-bottom: 10px; }
.pf-text a { color: var(--footer-font-color); text-decoration: none; }
.pf-text a:hover { color: var(--footer-font-hover-color); }
.pf-owner-name { font-weight: 700; margin: 0 0 6px; }
.pf-address div { line-height: 1.6; }
.ws-legal { margin: 0; }
.ws-legal a { color: var(--footer-font-color); text-decoration: none; }
.ws-legal a:hover { color: var(--footer-font-hover-color); }
@media (max-width: 767px) {
	.pf-grid { gap: 28px; padding: 28px 8px 20px; }
	.pf-col,
	.pf-col-wide { flex: 1 1 100%; }
	.pf-col .pf-bottom { margin-top: 16px; padding-top: 0; }
}

/* Align legacy Home/footer column headings/lists with the redesign */
.footer .footer-menu h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 18px;
	color: var(--footer-font-color);
}
.footer .ul_footerbody { list-style: none; padding: 0; margin: 0; }
.footer .ul_footerbody li { margin-bottom: 10px; }
.footer .footer-copyright { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* common_footer_code (SS2) bottom bar: credit left, copyright center, social right */
.cfc-copyright {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 12px;
	/* clear the fixed left chrome sidebar (~60px) so the credit isn't hidden under it */
	padding-left: 72px;
	padding-right: 24px;
}
@media (max-width: 767px) {
	.cfc-copyright { padding-left: 16px; padding-right: 16px; }
}
.cfc-copyright-center { flex: 1 1 auto; text-align: center; }
.cfc-copyright .software-credit { flex: 0 0 auto; }
.cfc-copyright .footer-social { flex: 0 0 auto; }

/* common_footer_code (SS2) content-driven layout: logos pinned to the left/right
   edges, the populated content columns (suite / legal / nav) centered in between.
   The middle always carries the suite (non-white-label), so the edge logos stay
   balanced instead of sprawling. Replaces the rigid col-md-* row. */
.cfc-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px 48px;
	padding: 28px 24px 4px 72px;
}
@media (max-width: 767px) {
	.cfc-grid { padding-left: 16px; padding-right: 16px; gap: 28px; justify-content: center; }
}
.cfc-side {
	flex: 0 0 auto;
	min-width: 120px;
	max-width: 220px;
	text-align: center;
}
.cfc-side img {
	max-height: 64px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.cfc-side p { margin: 10px 0 0; }
.cfc-mid {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 32px 48px;
}
.cfc-col {
	flex: 0 1 auto;
	min-width: 150px;
	max-width: 280px;
}

/* --- Buttons --- */
.orange_btn,
.btn-gr { background: var(--button-lnk-color); }

.btn_nsb,
.btn.read-more,
.btn-primary,
.primary-color { background: var(--btn-nsb-color); }

.btn_nsb > i,
.btn.read-more > i,
.btn-primary > i,
.primary-color > i { color: white; }

.carousel-indicators li { background-color: var(--btn-nsb-color); }

.btn_new { background: var(--btn-new-color); }
.btn_del { background: var(--btn-del-color); }

.btn_nsb:hover,
.btn-primary:hover { background-color: var(--btn-nsb-hover-color); }

.btn_new:hover { background-color: var(--btn-new-hover-color); }
.btn_del:hover { background-color: var(--btn-del-hover-color); }

.btn-primary:not([disabled]):not(.disabled).active { background-color: var(--active-button-back-color); }
.btn_nsb:not([disabled]):not(.disabled).active { background-color: var(--active-button-back-color); }

.btn-primary:not([disabled]):not(.disabled).active:hover {
	background-color: var(--active-btn-color-hover);
	color: var(--active-btn-text-color-hover);
}

.btn_nsb:not([disabled]):not(.disabled).active:hover {
	background-color: var(--active-btn-color-hover);
	color: var(--active-btn-text-color-hover);
}

.dropdown.dashboard-action-btn .dropdown-toggle { background: var(--btn-action-color); }
.setting-btn { background: var(--btn-action-color); }

.btn-light-blue-custom {
	background: var(--btn-tile-grid-bk-color);
	color: var(--btn-tile-grid-color);
}

.btn-light-blue-custom:hover {
	background: var(--btn-tile-grid-hover-color);
	color: var(--btn-tile-grid-color);
}

.btn-light-blue-custom.active {
	background: var(--btn-tile-grid-hover-color);
	color: var(--btn-tile-grid-color);
}

a.tabing_button_left.active {
	background: var(--btn-nsb-color);
	color: var(--btn-link-text-color);
}

a.tabing_button_left { border: 1px solid var(--btn-nsb-color); }

/* --- Slider --- */
.slider_text h1,
.slider_text h2,
.slider_text h3,
.slider_text h4,
.slider_text h5,
.slider_text h6 { color: var(--slider-font-color); }

.slider_nav_bar .nav-tabs > li.active > a,
.slider_nav_bar .nav-tabs > li.active > a:hover,
.slider_nav_bar .nav-tabs > li.active > a:focus {
	background: var(--btn-nsb-color);
	color: var(--slider-tab-text-color);
}

.slider_nav_bar li a { color: var(--slider-tab-text-color); }

.slider_nav_bar .nav > li > a:hover,
.slider_nav_bar .nav > li > a:focus {
	background: var(--btn-nsb-color);
	color: var(--slider-tab-text-color);
}

.why_academy p { font-size: calc(var(--font-size-home) * 1px); }

/* --- Course --- */
#course-header { color: var(--course-head-subtitle-color); }

.menu_block:hover { background: var(--course-type-bk-hover-color); }
.menu_block { background: var(--course-type-bk-color); }

#promotion_html1 .bg-success,
#promotion_html1 .bg-info,
#promotion_html1 .bg-warning,
#promotion_html1 .bg-secondary { background-color: var(--course-type-bk-hover-color); }

/* --- Search --- */
.right_search select,
.searchcourse select { background-color: var(--nav-trans-lnk-color); }

/* ===================================================================
   Basic Reset / Normalize
   =================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	color: var(--body-color);
	background-color: var(--body-bk-color);
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	text-decoration: none;
}

/* ===================================================================
   Utility: Hide class (used across the project)
   =================================================================== */
.hide {
	display: none;
}

/* ===================================================================
   General Utility Styles
   =================================================================== */

/* Alerts */
.alert {
	border-radius: 8px;
}

/* Dropdowns */
.dropdown-menu {
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Badge styling */
.badge {
	border-radius: 12px;
}

/* Transitions */
.nav-link,
.sidebar_menu,
.sidebar_no_collapse_menu,
.dropdown-item {
	transition: background 0.2s ease, color 0.2s ease;
}

/* Tables */
table {
	font-size: 14.4px;
}

table th {
	font-weight: 600;
}

table td,
table th {
	padding: 10px 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* ===================================================================
   Header — #director-header, .layout_header
   (Extracted from director_header.ctp inline styles)
   =================================================================== */

/* Fixed top navbar */
#director-header.layout_header {
	background-color: var(--header-bk-color);
	height: 56px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	z-index: 1030;
	padding: 0 16px;
}

/* Header layout — main flex container */
.justify-header-top {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

/* Collapsed menu — push to right */
.director-header-mainmenu {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.director-header-mainmenu .navbar-nav {
	display: flex;
	align-items: center;
	flex-direction: row;
}

/* Flag dropdown wrapper — sits at the end of the navbar */
.login-divv {
	display: flex;
	align-items: center;
	margin-left: 8px;
	list-style: none;
}

#director-header.layout_header .navbar-nav .nav-item {
	position: relative;
	display: flex;
	align-items: center;
}

#director-header.layout_header .navbar-nav .nav-link {
	color: var(--header-text-color);
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
}

#director-header.layout_header .navbar-nav .nav-link:hover {
	color: var(--header-font-hover-color);
	background-color: rgba(0, 0, 0, 0.04);
}

/* Header flag dropdown */
.header_flag .dropdown-menu {
	min-width: 5rem;
}

li.nav-item.header_flag.dropdown.mob-flag {
	display: none;
}

/* Header dropdown menus */
.header_drop {
	border-radius: 8px !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	padding: 8px 0;
}

.header_drop .dropdown-item {
	padding: 8px 16px;
	font-size: 13px;
	color: #333;
	border-radius: 0;
}

.header_drop .dropdown-item:hover {
	background-color: #f5f6fa;
	color: #1a1a2e;
}

/* Notification dropdown */
.notify-drop {
	min-width: 320px;
	max-height: 400px;
	overflow-y: auto;
}

/* Notification badges */
#director-header .badge-danger {
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 10px;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 4px;
	border-radius: 12px;
}

/* Wallet balance display */
.wallet-balance-text {
	font-weight: 600;
	color: #28a745;
}

.wallet-dropdown {
	min-width: 200px;
}

.wallet-dropdown .dropdown-item-text {
	padding: 0.5rem 1rem;
}

/* Logo area */
#director-header .img-fluid {
	max-height: 40px;
}

/* Quick navigation button */
.quick-navigation-button {
	font-size: 20px;
	cursor: pointer;
	color: var(--header-text-color);
	transition: color 0.2s ease;
	margin-left: 50px;
}

.quick-navigation-button:hover {
	color: var(--header-font-hover-color);
}

/* Mobile hamburger */
#director-header .navbar-toggler {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	padding: 4px 8px;
}

/* Header responsive breakpoints */
@media (max-width: 420px) and (min-width: 360px) {
	li.nav-item.header_flag.dropdown.mob-flag {
		display: inline-block;
	}

	.layout_header .navbar-nav .nav-item.avatar.dropdown .dropdown-menu {
		left: 0px;
	}
}

@media (max-width: 767px) and (min-width: 421px) {
	.layout_header .navbar-nav .nav-item.avatar.dropdown .dropdown-menu {
		left: auto;
		right: 0;
	}

	li.nav-item.header_flag.dropdown.mob-flag {
		display: inline-block;
	}
}

@media (max-width: 991px) {
	.director-header-mainmenu .navbar-nav {
		flex-direction: column;
		align-items: flex-start;
	}

	.login-divv {
		margin-left: 0;
	}
}

/* ===================================================================
   Sidebar — .sidebar-primary, .sidebar-secondary, #sidebar
   (Extracted from director_sidebar.ctp inline styles)
   =================================================================== */

/* Override fixed sidenav transform */
.fixed-sn .side-nav.fixed {
	transform: translateX(-100%) !important;
}

.double-nav .button-collapse {
	display: block;
	position: relative;
	font-size: 1.4rem;
	margin-right: 10px;
	margin-left: 10px;
}

.fixed-sn .double-nav,
.fixed-sn footer,
.fixed-sn main {
	padding-left: 0;
}

.collapsible-body.in {
	display: block !important;
}

/* Sidebar background fix */
.side-nav .sidenav-bg:after {
	height: auto;
}

/* Sidebar toggle button */
#sidebar-toggle-all {
	background-color: rgb(235, 230, 231) !important;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	z-index: 72001;
	transition: background-color 0.2s ease, left 0.25s cubic-bezier(0.4, 0, 0.2, 1), top 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar-toggle-all:hover {
	background-color: #333 !important;
}

#sidebar-toggle-all:hover i {
	color: #fff !important;
}

/* Primary sidebar — wrapper + icon strip share a single background source */
#sidebar,
#sidebar.rgba-blue-strong,
#sidebar.rgba-blue-strong::after {
	background-color: var(--director-sidebar-bk-color) !important;
}

#sidebar .top {
	width: 60px;
	background-color: var(--director-sidebar-bk-color);
	z-index: 1020;
}

#sidebar .top:has(.dropdown.show) {
	z-index: 72002;
}

/* Sidebar menu items */
.sidebar_menu,
.sidebar_no_collapse_menu {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	margin: 4px auto;
}

.sidebar_menu:hover,
.sidebar_no_collapse_menu:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

.sidebar_menu.active,
.sidebar_no_collapse_menu.active {
	background-color: rgba(255, 255, 255, 0.25);
}

.sidebar_menu i,
.sidebar_no_collapse_menu i {
	font-size: 16px;
}

/* Academy logo cropper in sidebar */
.sidebar_menu .image-cropper {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.sidebar_menu .image-cropper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Secondary sidebar — expanded menu panel (base, overridden by layout block below) */

/* Sidebar sub-menu panels */
.sidebar_sub_menu {
	padding: 8px 0;
}

.sidebar_sub_menu p {
	font-size: 12px;
	font-weight: 700;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
	padding: 0 8px;
}

.sidebar_sub_menu p i {
	margin-right: 6px;
	font-size: 13px;
}

.sidebar_sub_menu hr {
	margin: 8px 0;
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	grid-column: 1 / -1;
}

.sidebar_sub_menu ul {
	padding: 4px 0 !important;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

.sidebar_sub_menu ul li {
	margin-bottom: 0;
}

.sidebar_sub_menu ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px 2px 10px;
	border-radius: 12px;
	font-size: 10.5px;
	line-height: 1.3;
	color: #555;
	transition: all 0.18s ease;
	position: relative;
	min-height: 72px;
	overflow: visible;
	word-break: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

.sidebar_sub_menu ul li a:hover {
	background-color: rgba(66, 133, 244, 0.08);
	color: #1a1a2e;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sidebar_sub_menu ul li a .submenu-dashboard-cta i {
	transition: all 0.18s ease;
}

#sidebar .sidebar_sub_menu ul li a:hover .submenu-dashboard-cta i,
.sidebar_sub_menu ul li a:hover .submenu-dashboard-cta i {
	color: var(--submenu-icon-color, #4285f4) !important;
	transform: scale(1.1);
}

.submenu-dashboard-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 auto 6px;
	text-align: center;
	flex-shrink: 0;
	background: rgba(66, 133, 244, 0.08);
	border-radius: 10px;
	transition: all 0.18s ease;
}

/* Hide dropdown caret in flyout grid items */
.sidebar_sub_menu .dropdown-toggle::after {
	display: none;
}

/* Show a default icon for empty icon containers */
.submenu-dashboard-cta:not(:has(i)):not(:has(img))::before {
	content: '\f0c8';
	font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
	font-weight: 400;
	font-size: 16px;
	color: var(--submenu-icon-color, #4285f4);
}

.sidebar_sub_menu ul li a:hover .submenu-dashboard-cta {
	background: rgba(66, 133, 244, 0.15);
}

#sidebar .submenu-dashboard-cta i,
.submenu-dashboard-cta i {
	font-size: 16px;
	color: var(--submenu-icon-color, #4285f4) !important;
}

/* Flyout section header ("MY CRM", "Promotion" etc.) — render as a colored
   banner: background follows the primary sidebar bg, text + icon follow the
   sidebar's solid link color (i.e. the icon color used on the sidebar strip).
   Bootstrap .text-muted (#6c757d !important) and #sidebar i (color !important)
   override defaults; scope to sidebar to win specificity. */
#sidebar .sidebar-secondary .sidebar_sub_menu > p.text-muted,
.sidebar-secondary .sidebar_sub_menu > p.text-muted {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 8px 12px;
	background-color: var(--director-sidebar-bk-color, #343A40);
	border-radius: 8px;
	color: var(--nav-solid-lnk-color, #FFFFFF) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

#sidebar .sidebar-secondary .sidebar_sub_menu > p.text-muted i,
.sidebar-secondary .sidebar_sub_menu > p.text-muted i {
	color: var(--nav-solid-lnk-color, #FFFFFF) !important;
}

/* The <hr> directly after the section header is redundant once the header is
   a colored banner — collapse it. */
#sidebar .sidebar-secondary .sidebar_sub_menu > p.text-muted + hr,
.sidebar-secondary .sidebar_sub_menu > p.text-muted + hr {
	display: none;
}

/* Profile dropdown in sidebar */
#sidebarProfileDropdown + .dropdown-menu {
	min-width: 230px;
	border-radius: 12px;
	border: 1px solid #e5e5e5;
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.12);
	padding: 0.6rem 0;
}

/* Academy up/down arrows in sidebar */
.link_academy_up,
.link_academy_down {
	display: block;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: 4px 0;
	font-size: 14px;
	transition: color 0.2s ease;
}

.link_academy_up:hover,
.link_academy_down:hover {
	color: #fff;
}

/* --- Sidebar layout & positioning (extracted from second style block) --- */

.sidebar-secondary {
	background-color: #FAFBFC;
	position: fixed;
	top: 50px;
	left: 60px;
	width: 360px;
	z-index: 72000;
	max-height: calc(100vh - 80px);
	height: auto;
	overflow-y: auto;
	border-radius: 0 16px 16px 0;
	box-shadow: 8px 0 32px rgba(0, 0, 0, 0.10), 2px 0 8px rgba(0, 0, 0, 0.06);
	border-right: 1px solid rgba(0, 0, 0, 0.06);
	/* Flyout animation */
	opacity: 0;
	transform: translateX(-12px);
	pointer-events: none;
	transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-secondary.flyout-open {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

/* Modern thin scrollbar */
.sidebar-secondary::-webkit-scrollbar {
	width: 5px;
}

.sidebar-secondary::-webkit-scrollbar-track {
	background: transparent;
}

.sidebar-secondary::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.12);
	border-radius: 10px;
}

.sidebar-secondary::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.22);
}

.sidebar-secondary {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

.sidebar-secondary-inner {
	padding: 12px 14px 20px;
}

.list-unstyled li {
	font-size: 14px;
	line-height: 18px;
}

.ui-navigation.left-nav {
	width: 60px;
	height: 100%;
	overflow: visible;
}

.profile-pic {
	display: inline;
	margin: 0 auto;
	margin-left: 0%;
	height: 100%;
	width: auto;
}

.ui-navigation.theme-blue {
	color: var(--nav-solid-lnk-color);
	background: var(--nav-footer-bk-color);
}

.ui-navigation {
	box-sizing: border-box;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1021;
}

.ui-navigation.left-nav .top,
.ui-navigation.left-nav .bottom {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#navbarDropdownMenuLink.dropdown-toggle::after {
	display: inline-block;
	margin-left: 0;
	vertical-align: middle;
	content: "";
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
	margin: 5px;
}

.ui-navigation.left-nav .top img,
.ui-navigation.left-nav .bottom img {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.main-list > .active {
	border: 1px solid #808080 !important;
	border-radius: 50%;
}

.ui-navigation.left-nav .top img.rounded-circle,
.ui-navigation.left-nav .bottom img.rounded-circle {
	width: 40px;
	max-width: 40px;
	max-height: 40px;
	height: 40px;
}

.ui-navigation.left-nav .top {
	position: absolute;
	top: 50px;
	left: 0px;
}

.border-white {
	border: 2px solid white;
}

.ui-navigation.left-nav .bottom {
	position: absolute;
	bottom: 0;
	left: 0;
}

/* Left icon active state */
.sidebar_menu.active,
.sidebar_no_collapse_menu.active {
	background: linear-gradient(135deg, rgba(170, 171, 172, 0.25), rgba(122, 123, 123, 0.15)) !important;
	border-radius: 20px !important;
	border: 2px solid #ffffff !important;
	box-shadow:
		0 4px 15px rgba(54, 54, 54, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 20px rgba(255, 255, 255, 0.2),
		0 0 0 3px rgba(255, 255, 255, 0.3),
		0 0 30px rgba(255, 255, 255, 0.4) !important;
	transition: background 0.3s ease, box-shadow 0.3s ease !important;
	position: relative !important;
	overflow: hidden !important;
}

.sidebar_menu.active::before,
.sidebar_no_collapse_menu.active::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%) !important;
	animation: shimmer 3s ease-in-out infinite !important;
	pointer-events: none !important;
	z-index: 1 !important;
	will-change: transform !important;
}

.sidebar_menu.active .image-cropper,
.sidebar_no_collapse_menu.active .image-cropper,
.ui-navigation.left-nav .sidebar_menu.active .image-cropper,
.ui-navigation.left-nav .sidebar_no_collapse_menu.active .image-cropper {
	border-radius: 50% !important;
	box-shadow: inset 0 0 0 2px #ffffff, 0 0 15px rgba(255, 255, 255, 0.6), 0 0 25px rgba(255, 255, 255, 0.4) !important;
	position: relative !important;
	z-index: 2 !important;
}

#sidebar-toggle-link.sidebar_menu.active {
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}
	50% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* Right link active */
.sidebar_sub_menu li.active > a,
.sidebar_sub_menu a.active {
	color: var(--nav-footer-bk-color, #4285f4) !important;
	font-weight: 600 !important;
	background: rgba(66, 133, 244, 0.10) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(66, 133, 244, 0.12) !important;
	transform: none !important;
}

.sidebar_sub_menu li.active > a .submenu-dashboard-cta,
.sidebar_sub_menu a.active .submenu-dashboard-cta {
	background: rgba(66, 133, 244, 0.18) !important;
}

.sidebar_sub_menu li.active > a .submenu-dashboard-cta i,
.sidebar_sub_menu a.active .submenu-dashboard-cta i {
	color: var(--nav-footer-bk-color, #4285f4) !important;
}

.sidebar_sub_menu li.active > a::before,
.sidebar_sub_menu a.active::before {
	display: none !important;
}

/* Hide tooltips when flyout is open */
.sidebar-secondary.flyout-open ~ .tooltip,
#sidebar .sidebar_menu[aria-describedby] .tooltip {
	display: none !important;
	opacity: 0 !important;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 10px rgba(30, 136, 229, 0.6), 0 0 20px rgba(30, 136, 229, 0.4);
	}
	50% {
		opacity: 0.9;
		box-shadow: 0 0 15px rgba(30, 136, 229, 0.8), 0 0 30px rgba(30, 136, 229, 0.6);
	}
}

/* ===================================================================
   Footer — footer, quicklinks modal (.ql-*)
   (Extracted from director_footer.ctp inline styles)
   =================================================================== */

/* Footer base */
footer {
	background-color: var(--nav-footer-bk-color);
	color: var(--footer-font-color);
	padding: 16px 24px;
}

footer a {
	color: var(--footer-font-color);
	transition: color 0.2s ease;
}

footer a:hover {
	color: var(--footer-font-hover-color);
}

/* Quicklinks modal styles */
.ql-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 12px 0;
	margin-bottom: 8px;
	border-bottom: 1px solid #f0f0f0;
}

.ql-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 15px;
}

.ql-icon-primary {
	background-color: #e8f0fe;
	color: #3b5bdb;
}

.ql-icon-success {
	background-color: #e6f4ea;
	color: #2e7d32;
}

.ql-icon-secondary {
	background-color: #f0f0f5;
	color: #5c5f72;
}

.ql-icon-warning {
	background-color: #fff8e1;
	color: #f57c00;
}

.ql-icon-info {
	background-color: #e3f2fd;
	color: #0277bd;
}

.ql-section-title {
	font-weight: 600;
	font-size: 14px;
	color: #1a1a2e;
}

.ql-link-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ql-link-list li {
	margin-bottom: 4px;
}

.ql-link-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 13px;
	color: #444;
	text-decoration: none;
	transition: background 0.15s ease;
	line-height: 1.3;
}

.ql-link-item:hover {
	background-color: #f5f6fa;
	color: #1a1a2e;
	text-decoration: none;
}

.ql-link-item i {
	font-size: 12px;
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}

.ql-link-item.ql-link-primary i {
	color: #3b5bdb;
}

.ql-link-item.ql-link-success i {
	color: #2e7d32;
}

.ql-link-item.ql-link-secondary i {
	color: #5c5f72;
}

.ql-link-item.ql-link-warning i {
	color: #f57c00;
}

.ql-link-item.ql-link-info i {
	color: #0277bd;
}

#quicklinkmodal .modal-body {
	padding: 20px 24px;
}

#quicklinkmodal .modal-header {
	padding: 16px 24px 12px;
	border-bottom: 1px solid #f0f0f0;
}

#quicklinkmodal .ql-col {
	padding: 16px 20px;
}

#quicklinkmodal .ql-col:not(:last-child) {
	border-right: 1px solid #f0f0f0;
}

/* Modal backdrop blur */
.modal-backdrop.blur {
	backdrop-filter: blur(15px);
	z-index: -10 !important;
}

/* -------------------------------------------------------
   Course Type Selection Modal (#basicExampleModal)
   ------------------------------------------------------- */
div#basicExampleModal .modal-dialog,
div#basicExampleModal .modal-dialog.modal-xl,
div#basicExampleModal .modal-dialog.modal-xl.modal-dialog-centered {
	max-width: 90vw !important;
	width: 90vw !important;
	min-width: 90vw !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 30px;
	margin-bottom: 30px;
}

@media (min-width: 1600px) {
	div#basicExampleModal .modal-dialog,
	div#basicExampleModal .modal-dialog.modal-xl {
		max-width: 1440px !important;
		min-width: 1440px !important;
	}
}

#basicExampleModal .modal-header {
	padding: 20px 24px 16px;
	border-bottom: 1px solid #f0f0f0;
}

#basicExampleModal .modal-header .modal-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--body-color);
}

#basicExampleModal .modal-body.courseTypeModal {
	padding: 24px;
}

#basicExampleModal .modal-body.courseTypeModal > .row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin: 0;
}

#basicExampleModal .modal-body.courseTypeModal > .row > [class*="col"] {
	flex: none;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

@media (max-width: 991px) {
	#basicExampleModal .modal-body.courseTypeModal > .row {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 575px) {
	#basicExampleModal .modal-body.courseTypeModal > .row {
		grid-template-columns: repeat(2, 1fr);
	}
}

#basicExampleModal .modal-footer {
	border-top: 1px solid #f0f0f0;
	padding: 12px 24px;
}

/* Custom card style (course type selection cards) */
.custom-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	padding: 12px;
	transition: all 0.25s ease;
	cursor: pointer;
	height: 100%;
	background: #fff;
	text-align: center;
}

.custom-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
	border-color: var(--btn-nsb-color);
}

.custom-card a {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.custom-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	flex-shrink: 0;
	border-radius: 6px;
	background: #f5f5f5;
}

.custom-card h5 {
	font-size: 14px;
	font-weight: 600;
	margin: 12px 0 6px;
	color: var(--body-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	line-height: 1.3;
}

.custom-card p {
	font-size: 12px;
	color: #888;
	margin-bottom: 0;
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Academy background image (note: background-image is set dynamically in CTP via PHP) */
.bgacademy {
	background-size: cover;
	background-repeat: no-repeat;
	margin-left: -2px;
	margin-top: -16px;
	margin-bottom: -16px;
}

/* Footer misc form overrides */
.new_design_div select {
	display: inline-block !important;
}

.form-inline {
	display: block !important;
}

/* ===================================================================
   Body / Main Content Area — .main
   (Extracted from director_body.ctp)
   =================================================================== */

.main {
	background-color: #fff;
	min-height: calc(100vh - 56px);
	position: relative;
}

/* Flash messages */
.main .alert {
	border-radius: 8px;
	font-size: 14px;
}

/* Modal general enhancements */
.modal-content {
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.modal-header {
	border-bottom: 1px solid #f0f0f0;
	padding: 16px 24px;
}

.modal-footer {
	border-top: 1px solid #f0f0f0;
	padding: 12px 24px;
}

/* ===================================================================
   MDB Override — Phase 1: Neutralize MDB behaviors
   =================================================================== */

/* --- 1. Disable waves-effect ripple animation --- */
.waves-effect .waves-ripple,
.waves-ripple {
	display: none !important;
}

/* --- 2. Disable MDB md-form floating label behavior --- */
.md-form {
	position: relative;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.md-form label {
	position: static;
	transform: none;
	font-size: 13px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.65);
	margin-bottom: 4px;
	display: block;
	pointer-events: auto;
	transition: none;
	top: auto;
	left: auto;
}

.md-form label.active {
	transform: none;
	font-size: 13px;
	top: auto;
}

/* Reset MDB input styling — use our bordered inputs */
.md-form input[type="text"]:not(.browser-default),
.md-form input[type="password"]:not(.browser-default),
.md-form input[type="email"]:not(.browser-default),
.md-form input[type="url"]:not(.browser-default),
.md-form input[type="time"]:not(.browser-default),
.md-form input[type="date"]:not(.browser-default),
.md-form input[type="datetime-local"]:not(.browser-default),
.md-form input[type="tel"]:not(.browser-default),
.md-form input[type="number"]:not(.browser-default),
.md-form input[type="search"]:not(.browser-default) {
	border: 1px solid rgba(0, 0, 0, 0.18) !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	height: 38px !important;
	font-size: 14px;
	background: #fff;
	box-shadow: none !important;
	margin: 0;
	box-sizing: border-box;
}

.md-form input[type="text"]:not(.browser-default):focus,
.md-form input[type="password"]:not(.browser-default):focus,
.md-form input[type="email"]:not(.browser-default):focus,
.md-form input[type="url"]:not(.browser-default):focus,
.md-form input[type="time"]:not(.browser-default):focus,
.md-form input[type="date"]:not(.browser-default):focus,
.md-form input[type="datetime-local"]:not(.browser-default):focus,
.md-form input[type="tel"]:not(.browser-default):focus,
.md-form input[type="number"]:not(.browser-default):focus,
.md-form input[type="search"]:not(.browser-default):focus {
	border-color: #1867C0 !important;
	box-shadow: 0 0 0 2px rgba(24, 103, 192, 0.10) !important;
}

.md-form textarea.md-textarea {
	border: 1px solid rgba(0, 0, 0, 0.18) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	height: auto;
	min-height: 80px;
	background: #fff;
	box-shadow: none !important;
}

.md-form textarea.md-textarea:focus {
	border-color: #1867C0 !important;
	box-shadow: 0 0 0 2px rgba(24, 103, 192, 0.10) !important;
}

/* --- 3. Disable MDB side-nav (we use our own sidebar) --- */
.side-nav.fixed {
	transform: translateX(-100%) !important;
}

.fixed-sn .double-nav,
.fixed-sn footer,
.fixed-sn main {
	padding-left: 0 !important;
}

/* --- 4. Switch / Checkbox / Radio fix --- */
/* Toggle switch (.switch with .slider.round) */
.switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.87);
	margin-bottom: 0;
	line-height: 22px;
}

.switch input[type="checkbox"] {
	position: relative;
	width: 40px;
	min-width: 40px;
	height: 22px;
	appearance: none;
	-webkit-appearance: none;
	background: #ccc;
	border-radius: 11px;
	cursor: pointer;
	transition: background 0.2s;
	flex-shrink: 0;
	margin: 0;
	opacity: 1 !important;
	pointer-events: auto !important;
	vertical-align: middle;
}

.switch input[type="checkbox"]:checked {
	background: #1867C0;
}

.switch input[type="checkbox"]::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch input[type="checkbox"]:checked::before {
	transform: translateX(18px);
}

.switch input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hide the old .slider.round span (not needed with new CSS switch) */
.switch .slider {
	display: none;
}

/* Bootstrap custom-control-input — ensure visibility */
.custom-control.custom-switch .custom-control-input {
	opacity: 1;
	position: relative;
	width: 40px;
	height: 22px;
	z-index: 1;
}

/* Standard checkboxes & radios inside forms */
input[type="checkbox"],
input[type="radio"] {
	accent-color: #1867C0;
}

/* --- 5. Native select styling (replaces MDB materialSelect) --- */
/* :not(.swal2-select) — SweetAlert2 modals contain hidden helper <select> elements
   that ship with inline `style="display: none"`. The broad `select { display: block !important }`
   below would otherwise force them visible, leaving an empty frame inside Swal modals. */
select:not(.swal2-select),
select.form-control,
select.mdb-select,
select.browser-default {
	display: block !important;
	width: 100%;
	height: 38px;
	padding: 6px 32px 6px 12px;
	font-size: 14px;
	font-family: var(--font-family);
	color: rgba(0, 0, 0, 0.87);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

select:focus,
select.form-control:focus,
select.mdb-select:focus {
	border-color: #1867C0;
	box-shadow: 0 0 0 2px rgba(24, 103, 192, 0.10);
	outline: none;
}

select:disabled {
	background-color: #f5f5f5;
	cursor: not-allowed;
	opacity: 0.7;
}

/* Multi-select */
select[multiple],
select[multiple].mdb-select {
	height: auto;
	min-height: 80px;
	padding: 4px;
	background-image: none;
}

select[multiple] option {
	padding: 6px 10px;
	border-radius: 4px;
	margin-bottom: 2px;
}

select[multiple] option:checked {
	background: #e8f0fe;
	color: #1867C0;
}

/* Quill editor toolbar: the broad `select { display: block !important }` rule
   above overrides Quill's inline `display: none` on the native <select> elements
   it converts into custom pickers — a second empty box appeared next to each
   picker. Hide them again with higher specificity. */
.ql-toolbar select,
.ql-toolbar.ql-snow select {
	display: none !important;
}

/* Small select variant */
select.form-control-sm {
	height: 32px;
	font-size: 13px;
	padding: 4px 28px 4px 10px;
}

/* Hide MDB-generated fake select elements */
.select-wrapper input.select-dropdown,
.select-wrapper ul.select-dropdown,
.select-wrapper .caret,
.select-wrapper .search-wrap {
	display: none !important;
}

/* Ensure native select is visible inside MDB wrapper */
.select-wrapper select {
	display: block !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: 38px !important;
	pointer-events: auto !important;
}

/* MDB select inside md-form spacing fix */
.md-form select,
.md-form .mdb-select {
	margin-top: 0;
	margin-bottom: 0;
}

/* ===================================================================
   Custom Multi-Select Dropdown (.ms-*)
   Replaces MDB materialSelect() for <select multiple>
   =================================================================== */
.ms-wrapper {
	position: relative;
	width: 100%;
}

.ms-trigger {
	display: flex;
	align-items: center;
	min-height: 38px;
	padding: 6px 32px 6px 12px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.87);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s;
	user-select: none;
}

.ms-trigger:hover {
	border-color: rgba(0, 0, 0, 0.3);
}

.ms-wrapper.open .ms-trigger {
	border-color: #1867C0;
	box-shadow: 0 0 0 2px rgba(24, 103, 192, 0.10);
	border-radius: 8px 8px 0 0;
}

.ms-placeholder {
	color: rgba(0, 0, 0, 0.4);
}

.ms-values {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dropdown panel */
.ms-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
	max-height: 260px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ms-wrapper.open .ms-dropdown {
	display: flex;
}

.ms-wrapper:not(.open) .ms-dropdown {
	display: none;
}

/* Search box */
.ms-search {
	padding: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.ms-search-input {
	width: 100%;
	height: 32px;
	padding: 4px 10px;
	font-size: 13px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	outline: none;
}

.ms-search-input:focus {
	border-color: #1867C0;
}

/* Options list */
.ms-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	flex: 1;
}

.ms-option {
	padding: 6px 12px;
	cursor: pointer;
	transition: background 0.15s;
	font-size: 14px;
}

.ms-option:hover {
	background: #f5f6fa;
}

.ms-option.selected {
	background: #e8f0fe;
}

.ms-option.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ms-option label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.87);
	pointer-events: none;
}

.ms-option label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: #1867C0;
	cursor: pointer;
	pointer-events: none;
}

.ms-option label span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hide native select when custom wrapper is present */
.ms-wrapper + select[multiple],
.ss-wrapper + select,
select[multiple].mdb-select {
	position: absolute !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* ===================================================================
   Searchable Single Select (.ss-*)
   =================================================================== */
.ss-wrapper {
	position: relative;
	width: 100%;
	min-width: 320px;
}

#product-name .ss-wrapper {
	min-width: 400px;
}

#product-name .ss-dropdown {
	min-width: 450px;
}

.ss-trigger {
	display: flex;
	align-items: center;
	min-height: 38px;
	padding: 6px 32px 6px 12px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.87);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s;
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ss-trigger:hover {
	border-color: rgba(0, 0, 0, 0.3);
}

.ss-wrapper.open .ss-trigger {
	border-color: #1867C0;
	box-shadow: 0 0 0 2px rgba(24, 103, 192, 0.10);
	border-radius: 8px 8px 0 0;
}

.ss-placeholder {
	color: rgba(0, 0, 0, 0.4);
}

.ss-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Dropdown */
.ss-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
	max-height: 300px;
	overflow: hidden;
	flex-direction: column;
}

.ss-wrapper.open .ss-dropdown {
	display: flex;
}

/* Search */
.ss-search {
	padding: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.ss-search-input {
	width: 100%;
	height: 32px;
	padding: 4px 10px;
	font-size: 13px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	outline: none;
}

.ss-search-input:focus {
	border-color: #1867C0;
}

/* Options */
.ss-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	flex: 1;
}

.ss-option {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.15s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ss-option:hover {
	background: #f5f6fa;
}

.ss-option.selected {
	background: #e8f0fe;
	color: #1867C0;
	font-weight: 500;
}

.ss-option.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ===================================================================
   Member Dashboard — design tokens (cb-md-*)
   =================================================================== */

/* Card — uniform white surface */
.cb-md-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 20px;
}

/* ===================================================================
   Academy Settings — modernized layout (cb-as-*)
   Single horizontal tab strip + sectioned content cards
   =================================================================== */

.cb-as-page {
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px 24px 60px;
}

/* MDB sets `.fixed-sn main { margin: 0 6% }` at min-width 1200px which leaves
   only ~48px breathing room between the sidebar (60px) and content on a 1800px
   viewport. Bump margins globally so all pages (academy settings, course
   builder, dashboards) breathe further from the sidebar. */
@media (min-width: 1200px) {
	body > div.main main,
	body.fixed-sn main,
	body > div.main main:has(.cb-as-page) {
		margin-left: 8% !important;
		margin-right: 8% !important;
	}
}

/* Profile page (/users/profile) — let the cards breathe into the side bands.
   Two render paths share `.profile-edit-page`:
   - Director/team: <main class="profile-edit-page"> inside div.main. It inherits
     the 8% rule above; we trim that to an 80px page margin below, which also
     clears the 60px fixed sidebar (#sidebar .top), so its container can fill.
   - Member/trainee: .container-fluid.profile-edit-page inside #page-content-wrapper
     with NO sidebar offset, so the column must stay centered wide enough that its
     side gap clears the 60px sidebar (90% → ≥60px gap down to a 1200px viewport).
   These widths are mirrored in an inline <style> in profile.ctp so a stale CSS
   cache cannot revert them; keep the two in sync. */
main.profile-edit-page > .container,
.profile-edit-page .container .container {
	max-width: 100% !important;
	width: 100% !important;
}

.container-fluid.profile-edit-page > .container {
	max-width: 80% !important;
	width: 80% !important;
}

@media (max-width: 1199.98px) {
	.container-fluid.profile-edit-page > .container {
		max-width: 96% !important;
		width: 96% !important;
	}
}

@media (min-width: 1200px) {
	/* Trim the 8% side margin to 10% so the director branch also uses ~80% of the
	   width; 10% stays well clear of the 60px fixed sidebar (#sidebar .top). */
	body > div.main > main.profile-edit-page {
		margin-left: 10% !important;
		margin-right: 10% !important;
	}
}

/* The sidebar still uses plain Bootstrap .card markup — give it the same flat
   cb-as-card surface as the content so the two columns read as one design. */
.profile-edit-page .card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.profile-edit-page .card .card-body {
	padding: 20px 22px;
}

.profile-edit-page .card .card-title {
	font-size: 16px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin-bottom: 10px;
}

.profile-edit-page .card .card-text {
	font-size: 15px;
	color: rgba(0, 0, 0, 0.6);
}

/* Profile page runs ~2px larger than the shared cb-as / pp scale used elsewhere.
   Scoped to .profile-edit-page (and made specific enough to beat the inline
   pp-*/public-url rules in profile.ctp & director_profile.ctp) so other pages
   using cb-as keep their original sizes. */
.profile-edit-page .cb-as-title { font-size: 24px !important; }
.profile-edit-page .cb-as-tab-btn { font-size: 15px !important; }
.profile-edit-page .cb-as-field-label { font-size: 14px !important; }

.profile-edit-page .cb-as-card .form-control,
.profile-edit-page .cb-as-card input[type="text"]:not([class*="round-bg"]):not([class*="color"]),
.profile-edit-page .cb-as-card input[type="email"],
.profile-edit-page .cb-as-card input[type="number"],
.profile-edit-page .cb-as-card input[type="url"],
.profile-edit-page .cb-as-card input[type="tel"],
.profile-edit-page .cb-as-card select.form-control,
.profile-edit-page .cb-as-card textarea.form-control,
.profile-edit-page .form-control,
.profile-edit-page input[type="text"],
.profile-edit-page input[type="email"],
.profile-edit-page input[type="password"],
.profile-edit-page input[type="number"],
.profile-edit-page input[type="tel"],
.profile-edit-page input[type="url"],
.profile-edit-page input[type="date"],
.profile-edit-page select,
.profile-edit-page textarea {
	font-size: 16px !important;
}

.profile-edit-page .cb-as-card .md-form label,
.profile-edit-page .md-form label,
.profile-edit-page label {
	font-size: 14px !important;
}

.profile-edit-page .pp-id-name { font-size: 20px !important; }
.profile-edit-page .pp-id-mail { font-size: 15px !important; }
.profile-edit-page .pp-settings-btn { font-size: 15px !important; }
.profile-edit-page .public-url-group .form-control { font-size: 14px !important; }
.profile-edit-page .public-url-group .btn { font-size: 14px !important; }

.cb-as-title {
	font-size: 22px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.88);
	margin: 0 0 4px;
	text-align: left;
}

.cb-as-subtitle {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.55);
	margin: 0 0 24px;
}

.cb-as-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px;
	padding: 6px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	list-style: none;
}

.cb-as-tabs > li {
	margin: 0;
	flex: 0 0 auto;
}

.cb-as-tab-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.65) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	text-decoration: none !important;
	margin: 0 !important;
}

.cb-as-tab-btn:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	color: rgba(0, 0, 0, 0.88) !important;
}

.cb-as-tab-btn.active,
.cb-as-tabs > li.active .cb-as-tab-btn {
	background: rgba(37, 99, 235, 0.10) !important;
	color: #2563EB !important;
}

/* Section card inside a tab pane */
.cb-as-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 22px 24px;
	margin-bottom: 20px;
}

.cb-as-card-header {
	font-size: 16px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: center;
	gap: 8px;
}

.cb-as-card-header > i {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.4);
}

.cb-as-card-header-sub {
	font-size: 12px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.5);
	margin: 4px 0 16px;
}

/* Field row label / control */
.cb-as-field {
	margin-bottom: 14px;
}

.cb-as-field-label {
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
	margin: 0 0 6px;
	display: block;
}

.cb-as-field-label .cb-as-info {
	color: rgba(0, 0, 0, 0.35);
	font-size: 11px;
	margin-left: 4px;
}

/* Generic input styling inside academy settings */
.cb-as-card .form-control,
.cb-as-card input[type="text"]:not([class*="round-bg"]):not([class*="color"]),
.cb-as-card input[type="email"],
.cb-as-card input[type="number"],
.cb-as-card input[type="url"],
.cb-as-card input[type="tel"],
.cb-as-card select.form-control,
.cb-as-card textarea.form-control {
	height: auto;
	min-height: 40px;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	font-size: 14px !important;
	box-shadow: none !important;
	background: #ffffff !important;
	color: rgba(0, 0, 0, 0.85) !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.cb-as-card textarea.form-control {
	min-height: 90px;
	resize: vertical;
}

.cb-as-card .form-control:focus,
.cb-as-card input:focus,
.cb-as-card textarea:focus,
.cb-as-card select:focus {
	border-color: rgba(37, 99, 235, 0.50) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important;
}

/* MDB md-form override inside settings card */
.cb-as-card .md-form {
	margin-top: 0;
	margin-bottom: 0;
}

.cb-as-card .md-form label {
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
	position: static;
	top: auto;
	left: auto;
}

/* Color input row (text input that doubles as colorpicker) */
.cb-as-color-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.cb-as-color-label {
	font-size: 13px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.7);
	margin: 0;
}

.cb-as-color-input {
	width: 130px;
	height: 36px;
	padding: 0 10px !important;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	cursor: pointer;
	color: #fff !important;
}

/* Two-column form grid */
.cb-as-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.cb-as-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 767px) {
	.cb-as-grid-2,
	.cb-as-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* Settings section group header inside design tab (e.g. "Branding settings") */
.cb-as-section-title {
	font-size: 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.75);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 18px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Switch / toggle wrapper */
.cb-as-switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.02);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	margin-bottom: 10px;
}

.cb-as-switch-row .cb-as-switch-label {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.78);
	margin: 0;
	font-weight: 500;
}

.cb-as-switch-row .cb-as-switch-desc {
	font-size: 11px;
	color: rgba(0, 0, 0, 0.5);
	margin-top: 2px;
	display: block;
}

/* File chooser styling */
.cb-as-card input[type="file"] {
	display: block;
	width: 100%;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.7);
	background: rgba(0, 0, 0, 0.02);
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
}

.cb-as-card input[type="file"]:hover {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.30);
}

/* Image preview */
.cb-as-image-preview {
	max-width: 220px;
	max-height: 140px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: #fff;
	object-fit: contain;
	display: block;
	margin-bottom: 10px;
}

/* Primary action buttons inside settings (Save / Submit) */
.cb-as-btn-primary {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 22px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: #16a34a !important;
	border: 1px solid #16a34a !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	transition: background 0.15s, border-color 0.15s;
}

.cb-as-btn-primary:hover {
	background: #15803d !important;
	border-color: #15803d !important;
	color: #fff !important;
}

.cb-as-btn-secondary {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	transition: background 0.15s, border-color 0.15s;
}

.cb-as-btn-secondary:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.24) !important;
	color: rgba(0, 0, 0, 0.9) !important;
}

.cb-as-btn-danger {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #dc3545 !important;
	background: rgba(220, 53, 69, 0.08) !important;
	border: 1px solid rgba(220, 53, 69, 0.20) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

.cb-as-btn-danger:hover {
	background: rgba(220, 53, 69, 0.14) !important;
	color: #dc3545 !important;
}

/* Alert banner */
.cb-as-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13px;
	margin-bottom: 16px;
	border: 1px solid;
}

.cb-as-alert > i {
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}

.cb-as-alert--warning {
	background: rgba(245, 158, 11, 0.08);
	border-color: rgba(245, 158, 11, 0.25);
	color: #92400e;
}

.cb-as-alert--danger {
	background: rgba(220, 53, 69, 0.08);
	border-color: rgba(220, 53, 69, 0.25);
	color: #991b1b;
}

.cb-as-alert--info {
	background: rgba(37, 99, 235, 0.06);
	border-color: rgba(37, 99, 235, 0.20);
	color: #1e3a8a;
}

/* Scoped overrides for the Design tab — turns existing Bootstrap card markup
   into the new cb-as-card surface without rewriting the entire 42KB template.
   The form fields (jscolor, mdb-select, etc.) keep working. */
#design_tab .card {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	margin-bottom: 20px;
}

#design_tab .card-header {
	background: #ffffff !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	padding: 16px 20px !important;
	border-radius: 12px 12px 0 0 !important;
}

#design_tab .card-header h4 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: rgba(0, 0, 0, 0.85) !important;
	margin: 0;
}

#design_tab .card-body {
	padding: 20px !important;
}

/* Make design tab labels uniform — small uppercase-style */
#design_tab .form-group label,
#design_tab .input label,
#design_tab .md-form label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.6) !important;
	margin: 0 0 6px !important;
	position: static !important;
	display: block;
	text-transform: none !important;
}

/* Color picker input: keep its colored background but apply consistent shape */
#design_tab input.jscolor {
	height: 36px !important;
	border-radius: 8px !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	padding: 0 12px !important;
	box-shadow: none !important;
	margin-bottom: 12px;
}

#design_tab input.form-control:not(.jscolor) {
	height: 40px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 14px;
}

/* H3 section title inside design tab */
#design_tab h3 {
	font-size: 18px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 8px 0 16px;
}

#design_tab h4 {
	font-size: 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.78);
	margin-bottom: 10px;
}

/* Image preview thumbnails */
#design_tab .preview_div_area {
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	padding: 8px;
	background: rgba(0, 0, 0, 0.02);
	max-width: 220px;
	margin-bottom: 10px;
}

#design_tab .preview_div_area img {
	max-width: 100%;
	max-height: 120px;
	display: block;
	object-fit: contain;
}

#design_tab input[type="file"] {
	background: rgba(0, 0, 0, 0.02);
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 10px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	width: 100%;
}

#design_tab input[type="file"]:hover {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.30);
}

/* Button branding radio row */
#design_tab .btn_brand label {
	font-size: 12px !important;
}

#design_tab .btn_brand .form-check-label {
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* Save/discard floating buttons retain their fixed positioning */

/* Apply the same treatment to Functions, Trainee Registration, etc. tabs */
#function_tab .card,
#trainee_regis_tab .card,
#product_settings_tab .card,
#billing_tab .card,
#smtp_register .card,
#plan_tab .card,
#landingpage_tab .card {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	margin-bottom: 20px;
}

#function_tab .card-header,
#trainee_regis_tab .card-header,
#product_settings_tab .card-header,
#billing_tab .card-header,
#smtp_register .card-header,
#plan_tab .card-header,
#landingpage_tab .card-header {
	background: #ffffff !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	padding: 16px 20px !important;
	border-radius: 12px 12px 0 0 !important;
}

#function_tab .card-header h4,
#trainee_regis_tab .card-header h4,
#product_settings_tab .card-header h4,
#billing_tab .card-header h4,
#smtp_register .card-header h4,
#plan_tab .card-header h4,
#landingpage_tab .card-header h4,
#function_tab .card-header h3,
#trainee_regis_tab .card-header h3,
#product_settings_tab .card-header h3,
#billing_tab .card-header h3 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: rgba(0, 0, 0, 0.85) !important;
	margin: 0;
}

#function_tab .card-body,
#trainee_regis_tab .card-body,
#product_settings_tab .card-body,
#billing_tab .card-body,
#smtp_register .card-body,
#plan_tab .card-body,
#landingpage_tab .card-body {
	padding: 20px !important;
}

/* Tab pane top spacing */
#design_tab,
#function_tab,
#trainee_regis_tab,
#product_settings_tab,
#billing_tab,
#smtp_register,
#plan_tab,
#landingpage_tab {
	padding-top: 4px;
}

/* Functions tab: each toggle group as a card */
/* Template Management tab — modernize the inner sub-tabs + template grid */
#landingpage_tab > .container,
#landingpage_tab > .container.mb-4 {
	max-width: none;
	padding: 0;
	margin: 0;
}

#landingpage_tab h3 {
	font-size: 22px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.88);
	margin: 4px 0 4px;
}

#landingpage_tab > .container > .tab-content > .tab-pane > .row .text-muted,
#landingpage_tab p.text-muted {
	color: rgba(0, 0, 0, 0.55) !important;
	font-size: 13px;
	margin-bottom: 20px;
}

/* Sub-tabs: Landing Page / Document / Email / Product Landing Page / Certificate */
#landingpage_tab #template-type-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	padding: 6px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	list-style: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#landingpage_tab #template-type-tabs .nav-item {
	margin: 0;
}

#landingpage_tab #template-type-tabs .nav-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.65) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	text-decoration: none !important;
}

#landingpage_tab #template-type-tabs .nav-link:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	color: rgba(0, 0, 0, 0.88) !important;
}

#landingpage_tab #template-type-tabs .nav-link.active {
	background: rgba(37, 99, 235, 0.10) !important;
	color: #2563EB !important;
}

/* Language label + select + Create button row */
#landingpage_tab .template-lang-select {
	height: 40px;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	padding: 0 12px !important;
	font-size: 14px !important;
	background: #ffffff !important;
	box-shadow: none !important;
	max-width: 220px !important;
}

#landingpage_tab label[for^="template-lang-select"] {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.6) !important;
	margin: 0 0 6px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Create new buttons — replace the purple gradient with our flat primary */
#landingpage_tab a.btn-secondary[href*="page-builder"],
#landingpage_tab a.btn[href*="page-builder"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px !important;
	padding: 0 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: #2563EB !important;
	background-image: none !important;
	border: 1px solid #2563EB !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

#landingpage_tab a.btn-secondary[href*="page-builder"]:hover,
#landingpage_tab a.btn[href*="page-builder"]:hover {
	background: #1d4ed8 !important;
	border-color: #1d4ed8 !important;
	color: #fff !important;
}

/* System Templates section heading */
#landingpage_tab .tab-pane > h4,
#landingpage_tab h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.78);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 24px 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#landingpage_tab h4 i.fa {
	color: rgba(37, 99, 235, 0.85);
	font-size: 14px;
}

/* Template grid cards */
#landingpage_tab [id^="template-grid-"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
	margin-top: 10px;
}

#landingpage_tab [id^="template-grid-"] > div[class*="col-"] {
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	width: 100%;
}

/* col-12 (e.g. "System Templates" heading) should span all grid columns */
#landingpage_tab [id^="template-grid-"] > .col-12 {
	grid-column: 1 / -1;
}

#landingpage_tab [id^="template-grid-"] .template-item,
#landingpage_tab [id^="template-grid-"] .card,
#landingpage_tab [id^="template-grid-"] > div[class*="col-"] > div {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: transform 0.18s, box-shadow 0.18s;
	margin: 0;
	padding: 0;
}

#landingpage_tab [id^="template-grid-"] .template-item:hover,
#landingpage_tab [id^="template-grid-"] .card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

#landingpage_tab [id^="template-grid-"] img {
	width: 100%;
	height: auto;
	display: block;
}

#landingpage_tab [id^="template-grid-"] .template-title,
#landingpage_tab [id^="template-grid-"] .card-title,
#landingpage_tab [id^="template-grid-"] h5 {
	font-size: 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 0;
	padding: 12px 16px 8px;
}

#landingpage_tab [id^="template-grid-"] .badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

#landingpage_tab [id^="template-grid-"] .badge-success,
#landingpage_tab [id^="template-grid-"] .badge.bg-success {
	background: #22c55e !important;
	color: #fff;
}

#landingpage_tab [id^="template-grid-"] button,
#landingpage_tab [id^="template-grid-"] .btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px !important;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: #2563EB !important;
	background-image: none !important;
	border: 1px solid #2563EB !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 12px 16px 16px !important;
	width: calc(100% - 32px);
}

#landingpage_tab [id^="template-grid-"] button:hover,
#landingpage_tab [id^="template-grid-"] .btn:hover {
	background: #1d4ed8 !important;
	border-color: #1d4ed8 !important;
	color: #fff !important;
}

/* Spinner during template load */
#landingpage_tab .spinner-border {
	color: #2563EB !important;
	margin: 24px auto;
	display: block;
}

#function_tab .function-tab-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#function_tab .function-trainee {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 16px 20px;
	margin: 0;
}

#function_tab .function-trainee h4 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: rgba(0, 0, 0, 0.85) !important;
	margin: 0;
	gap: 12px;
	align-items: center;
}

#function_tab .function-trainee p {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.55);
	margin: 4px 0 10px;
}

#function_tab .function-trainee .switch label {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.7);
}

#function_tab .portal-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
	row-gap: 12px;
	margin-bottom: 20px;
}

#function_tab .portal-heading h2 {
	flex: 1 1 auto;
	order: 1;
	font-size: 18px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 0;
}

#function_tab .portal-heading > a {
	order: 2;
	float: none !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

#function_tab .portal-heading > a:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
	color: rgba(0, 0, 0, 0.9) !important;
}

#function_tab .portal-heading > a > .fa,
#function_tab .portal-heading > a > .fas {
	color: #2563EB !important;
	margin: 0 !important;
}

/* === Billing tab: flex header with h4 + User preview + Clone billing ===
   Mirrors the layout fix used in #function_tab so the float:right links don't
   collide with the h4 / form below. */
#billing_tab .portal-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 10px;
	margin-bottom: 20px;
}

#billing_tab .portal-heading h4 {
	flex: 1 1 auto;
	order: 1;
	font-size: 18px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 0;
}

/* User preview link (the one without .btn-success) */
#billing_tab .portal-heading > a.btn-rounded:not(.btn-success):not(.btn-danger) {
	order: 2;
	float: none !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 40px !important;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

#billing_tab .portal-heading > a.btn-rounded:not(.btn-success):not(.btn-danger):hover {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
	color: rgba(0, 0, 0, 0.9) !important;
}

#billing_tab .portal-heading > a.btn-rounded:not(.btn-success):not(.btn-danger) > .fa,
#billing_tab .portal-heading > a.btn-rounded:not(.btn-success):not(.btn-danger) > .fas {
	color: #2563EB !important;
	margin: 0 !important;
}

/* Clone billing data — keep its native green pill style, only set flex order so
   it sits after the User preview button in the new flex header */
#billing_tab .portal-heading > a.btn-success.btn-rounded {
	order: 3;
	float: none !important;
	margin: 0 !important;
}

/* === Academy subscriptions tab (#plan_tab): User preview inside card-header h4 ===
   The link sits inline next to the h4 title with float-right. Reflow to a flex
   row so the button aligns cleanly on the right. */
#plan_tab .card > .card-header {
	display: block;
	padding-bottom: 12px;
}

#plan_tab .card > .card-header > h4 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
	row-gap: 10px;
	font-size: 18px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 0;
}

#plan_tab .card > .card-header > h4 > a.preview-btn,
#plan_tab .card > .card-header > h4 > a.btn-rounded {
	float: none !important;
	margin-left: auto !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 40px !important;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

#plan_tab .card > .card-header > h4 > a.preview-btn:hover,
#plan_tab .card > .card-header > h4 > a.btn-rounded:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
	color: rgba(0, 0, 0, 0.9) !important;
}

#plan_tab .card > .card-header > h4 > a.preview-btn > .fa,
#plan_tab .card > .card-header > h4 > a.preview-btn > .fas,
#plan_tab .card > .card-header > h4 > a.btn-rounded > .fa,
#plan_tab .card > .card-header > h4 > a.btn-rounded > .fas {
	color: #2563EB !important;
	margin: 0 !important;
}

#function_tab .alert-info {
	order: 3;
	flex-basis: 100%;
	background: rgba(37, 99, 235, 0.06) !important;
	border: 1px solid rgba(37, 99, 235, 0.20) !important;
	color: #1e3a8a !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	font-size: 13px;
	margin: 0 !important;
}

#function_tab .alert-info > i {
	color: #2563EB !important;
	margin-right: 6px;
}

/* Sub-toggle list inside a function group */
#function_tab .function-trainee .form-check,
#function_tab .function-trainee > div > div > div {
	font-size: 13px;
}

/* ===== Quick Actions (functions tab) — modernized ===== */

/* "Add" (+) button */
#function_tab .add-quick-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 4px 0 14px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: #4CAF50;
	border: none;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: background .15s, box-shadow .15s, transform .05s;
	cursor: pointer;
}

#function_tab .add-quick-action-button:hover {
	background: #43A047;
	box-shadow: 0 3px 8px rgba(76, 175, 80, 0.35);
}

#function_tab .add-quick-action-button:active {
	transform: translateY(1px);
}

/* Table */
#function_tab #sortable-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	overflow: hidden;
}

#function_tab #sortable-table thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.45);
	padding: 12px 14px;
	background: #FAFBFC;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	text-align: left;
}

#function_tab #sortable-table tbody td {
	padding: 12px 14px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.8);
	vertical-align: middle;
	border: none !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

#function_tab #sortable-table tbody tr:last-child td {
	border-bottom: none !important;
}

#function_tab #sortable-table tbody tr:hover td {
	background: #F6F9FE;
}

#function_tab #sortable-table .drag-icon {
	width: 44px;
	text-align: center;
	color: rgba(0, 0, 0, 0.3);
	cursor: grab;
}

#function_tab #sortable-table tbody td .fa-2x {
	font-size: 1.4em;
	color: rgba(0, 0, 0, 0.7);
}

/* Keep table icons visible on direct hover (neutralize the global
   i:hover { color:#fff !important } rule that turns icons white). */
#function_tab #sortable-table i:hover {
	color: inherit !important;
}

#function_tab .edit-quick-action-button {
	color: rgba(0, 0, 0, 0.4) !important;
	font-size: 15px;
	cursor: pointer;
	transition: color .15s;
}

#function_tab #sortable-table .edit-quick-action-button:hover {
	color: #1867C0 !important;
}

/* ===== Quick Action modals ===== */
#add-quick-action-modal .modal-dialog,
#edit-quick-action-modal .modal-dialog {
	max-width: 460px;
}

#add-quick-action-modal .modal-content,
#edit-quick-action-modal .modal-content {
	border: none;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

#add-quick-action-modal .modal-header,
#edit-quick-action-modal .modal-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	padding: 18px 22px;
}

#add-quick-action-modal .modal-title,
#edit-quick-action-modal .modal-title {
	font-size: 17px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
}

#add-quick-action-modal .modal-body,
#edit-quick-action-modal .modal-body {
	padding: 20px 22px;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
}

#add-quick-action-modal .modal-body .form-check,
#edit-quick-action-modal .modal-body .form-check {
	margin-right: 22px;
}

#add-quick-action-modal .modal-footer,
#edit-quick-action-modal .modal-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding: 14px 22px;
}

#add-quick-action-modal .modal-footer .btn,
#edit-quick-action-modal .modal-footer .btn {
	border-radius: 8px;
	padding: 8px 20px;
	font-weight: 600;
	font-size: 14px;
}

/* The internal/external link toggle uses the .hidden class, but Bootstrap 4 /
   MDB dropped it (no effect). Define it here so the toggle actually shows/hides
   the link select vs. the custom URL input. */
#add-quick-action-modal .hidden,
#edit-quick-action-modal .hidden {
	display: none !important;
}

/* Red footer buttons (Close / Delete): light label for contrast on red. */
#add-quick-action-modal .modal-footer .btn_del,
#edit-quick-action-modal .modal-footer .btn_del,
#add-quick-action-modal .modal-footer .btn_del i,
#edit-quick-action-modal .modal-footer .btn_del i {
	color: #fff !important;
}

/* ===== Custom icon picker (replaces the native icon <select>) ===== */
.icon-picker {
	position: relative;
	width: 100%;
}

/* Keep the native select in the form for submission, but hidden. */
select.icon-picker-native {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.icon-picker-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 42px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.82);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.icon-picker-trigger:hover {
	border-color: rgba(0, 0, 0, 0.32);
}

.icon-picker.open .icon-picker-trigger {
	border-color: #1867C0;
	box-shadow: 0 0 0 3px rgba(24, 103, 192, 0.12);
}

.icon-picker-current {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.icon-picker-current.placeholder {
	color: rgba(0, 0, 0, 0.4);
}

.icon-picker-current i {
	width: 18px;
	text-align: center;
	font-size: 16px;
}

.icon-picker-caret {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.4);
	transition: transform .15s;
}

.icon-picker.open .icon-picker-caret {
	transform: rotate(180deg);
}

.icon-picker-panel {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
	padding: 10px;
	display: none;
}

.icon-picker.open .icon-picker-panel {
	display: block;
}

.icon-picker-search-wrap {
	position: relative;
	margin-bottom: 8px;
}

.icon-picker-search-wrap > i {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: rgba(0, 0, 0, 0.35);
}

.icon-picker-search {
	width: 100%;
	height: 38px;
	padding: 0 12px 0 32px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	font-size: 13px;
}

.icon-picker-search:focus {
	outline: none;
	border-color: #1867C0;
	box-shadow: 0 0 0 3px rgba(24, 103, 192, 0.1);
}

.icon-picker-grid {
	max-height: 230px;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 4px;
}

.icon-picker-empty {
	grid-column: 1 / -1;
	padding: 18px;
	text-align: center;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.4);
}

.icon-picker-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 10px 4px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
}

.icon-picker-item > * {
	pointer-events: none;
}

.icon-picker-item i {
	font-size: 18px;
	color: rgba(0, 0, 0, 0.75);
}

.icon-picker-item .ip-name {
	max-width: 100%;
	font-size: 10px;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.icon-picker-item:hover {
	background: #F1F6FE;
	border-color: rgba(24, 103, 192, 0.25);
}

.icon-picker-item.active {
	background: #E7F0FD;
	border-color: #1867C0;
}

.icon-picker-item.active i,
.icon-picker-item.active .ip-name {
	color: #1867C0;
}

/* Trainee registration & similar wide-list tabs */
#trainee_regis_tab .function-trainee,
#trainee_regis_tab .reg-block-row {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 16px 20px;
	margin-bottom: 12px;
}

/* Webpages / Iframes shortcut buttons at the top */
#trainee_regis_tab .portal-heading .btn-rounded.btn-primary {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px !important;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	margin-right: 8px !important;
}

#trainee_regis_tab .portal-heading .btn-rounded.btn-primary:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.24) !important;
	color: rgba(0, 0, 0, 0.9) !important;
}

/* Info alert */
#trainee_regis_tab .alert-info {
	background: rgba(37, 99, 235, 0.06) !important;
	border: 1px solid rgba(37, 99, 235, 0.20) !important;
	color: #1e3a8a !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	font-size: 13px;
	margin: 12px 0 20px !important;
}

#trainee_regis_tab .alert-info p {
	margin: 0 !important;
	padding: 0 !important;
}

/* Heading row: "Choose your desired user registration fields" + User Preview */
#trainee_regis_tab .portal-heading h4 {
	font-size: 18px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.88);
	margin: 18px 0 0;
}

#trainee_regis_tab .portal-heading .btn-rounded:not(.btn-primary):not(.btn-success):not(.btn-danger),
#trainee_regis_tab .portal-heading a.regPreview {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 40px !important;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

#trainee_regis_tab .portal-heading .btn-rounded:not(.btn-primary):hover,
#trainee_regis_tab .portal-heading a.regPreview:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.24) !important;
	color: rgba(0, 0, 0, 0.9) !important;
}

/* Registration fields table */
#trainee_regis_tab table.table {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	margin: 16px 0 24px !important;
	border-collapse: separate;
	border-spacing: 0;
}

#trainee_regis_tab table.table thead th {
	font-size: 11px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: rgba(0, 0, 0, 0.02);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	border-top: none;
	padding: 12px 14px;
}

#trainee_regis_tab table.table tbody td {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.78);
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	border-bottom: none;
	padding: 12px 14px;
	vertical-align: middle;
}

#trainee_regis_tab table.table tbody tr:hover {
	background: rgba(37, 99, 235, 0.03);
}

#trainee_regis_tab table.table .move_field {
	color: rgba(0, 0, 0, 0.30);
	cursor: grab;
	font-size: 16px !important;
}

#trainee_regis_tab table.table .move_field:hover {
	color: rgba(0, 0, 0, 0.60);
}

/* Style checkboxes uniformly */
#trainee_regis_tab table.table .form-check {
	margin: 0;
	padding-left: 0;
}

#trainee_regis_tab table.table .form-check-input {
	position: relative;
	margin: 0;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

#trainee_regis_tab table.table .form-check-input.readonly,
#trainee_regis_tab table.table .form-check-label.readonly + .form-check-input {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Type column pill */
#trainee_regis_tab table.table tbody td:nth-child(5) {
	font-size: 11px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Add Field button under the table */
#trainee_regis_tab button.btn-rounded[type="button"]:not(.btn-primary):not(.btn-danger):not(.btn-success),
#trainee_regis_tab a[onclick*="add_more_fields"],
#trainee_regis_tab .btn[id*="add_field"],
#trainee_regis_tab #add_more_fields_btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px dashed rgba(0, 0, 0, 0.18) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 16px 0 !important;
}

#trainee_regis_tab #add_more_fields_btn:hover {
	background: rgba(0, 0, 0, 0.02) !important;
	border-color: rgba(0, 0, 0, 0.32) !important;
}

/* Switch rows under the table */
#trainee_regis_tab .switch {
	margin: 6px 0;
}

#trainee_regis_tab .switch label {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.75);
}

/* Textareas under registration */
#trainee_regis_tab textarea.form-control,
#trainee_regis_tab textarea {
	min-height: 120px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	color: rgba(0, 0, 0, 0.85);
	resize: vertical;
	box-shadow: none !important;
}

#trainee_regis_tab textarea:focus {
	border-color: rgba(37, 99, 235, 0.50) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important;
}

#trainee_regis_tab label[for*="text_after"],
#trainee_regis_tab label[for*="text_under"],
#trainee_regis_tab > label {
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.75);
	margin: 18px 0 6px;
	display: block;
}

/* Welcome message block (after registration) */
#trainee_regis_tab h4 + p,
#trainee_regis_tab strong + p {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.55);
	line-height: 1.5;
}

#trainee_regis_tab .traineeForm > .strong,
#trainee_regis_tab strong {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin-top: 24px;
}

/* "Create welcome message" / similar secondary CTAs */
#trainee_regis_tab a.btn[href*="welcome"],
#trainee_regis_tab a.btn[href*="advertisements"] {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

/* Bottom action buttons */
#trainee_regis_tab button.btn-danger,
#trainee_regis_tab .btn-danger {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 40px !important;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: #dc2626 !important;
	background-image: none !important;
	border: 1px solid #dc2626 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

#trainee_regis_tab button.btn-danger:hover {
	background: #b91c1c !important;
	border-color: #b91c1c !important;
	color: #fff !important;
}

#trainee_regis_tab button.btn-success,
#trainee_regis_tab .btn-success {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 40px !important;
	padding: 0 22px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: #16a34a !important;
	background-image: none !important;
	border: 1px solid #16a34a !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

#trainee_regis_tab button.btn-success:hover {
	background: #15803d !important;
	border-color: #15803d !important;
}

/* Product settings: ensure toggles/inputs are in a card-like surface */
#product_settings_tab > div:not(.row):not([class*="cb-as-"]) {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 16px 20px;
	margin-bottom: 12px;
}

/* SMTP / E-mail settings form polish */
#smtp_register .form-group {
	margin-bottom: 14px;
}

#smtp_register input[type="text"],
#smtp_register input[type="email"],
#smtp_register input[type="number"],
#smtp_register input[type="password"],
#smtp_register select.form-control {
	height: 40px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 14px;
	padding: 0 12px;
}

/* Billing tab polish */
#billing_tab .form-control {
	height: 40px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Plan tab (subscriptions) polish */
#plan_tab table {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

#plan_tab table th {
	font-size: 12px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: rgba(0, 0, 0, 0.02);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#plan_tab table td {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.78);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Default form-control polish across academy settings tabs */
.cb-as-page .form-control:not(.jscolor):not([class*="round-bg"]) {
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: none;
}

/* Mini action row (e.g. Clone academy / Delete academy / Status toggle) */
.cb-as-action-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.cb-as-action-bar .cb-as-status-pill {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.65);
}

/* === Uniform Save / Discard action buttons across all Academy Settings tabs ===
   The legacy templates use Bootstrap btn-success / btn-danger (sometimes with
   btn-lg, sometimes not) for the bottom-of-tab Save changes / Discard pair.
   This block normalizes both the inline row and the right-side floating
   .fixed-action-btn icons so every tab matches the cb-as-btn-primary /
   cb-as-btn-secondary pattern. `.btn-sm` (Clone billing, + Add Quick Action)
   and `.addField` (Add Field link in user registration) are excluded so they
   keep their own pill style. */

.cb-as-page .btn.btn-rounded.btn-success:not(.btn-sm):not(.btn-xs):not(.addField):not(.plus-btn),
.cb-as-page button.btn-rounded.btn-success:not(.btn-sm):not(.btn-xs):not(.addField):not(.plus-btn) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 22px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: #16a34a !important;
	background-image: none !important;
	border: 1px solid #16a34a !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	margin: 0 0 0 10px !important;
}

.cb-as-page .btn.btn-rounded.btn-success:not(.btn-sm):not(.btn-xs):not(.addField):not(.plus-btn):hover,
.cb-as-page button.btn-rounded.btn-success:not(.btn-sm):not(.btn-xs):not(.addField):not(.plus-btn):hover {
	background: #15803d !important;
	border-color: #15803d !important;
	color: #fff !important;
}

.cb-as-page .btn.btn-rounded.btn-danger:not(.btn-sm):not(.btn-xs),
.cb-as-page button.btn-rounded.btn-danger:not(.btn-sm):not(.btn-xs) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: #dc2626 !important;
	background-image: none !important;
	border: 1px solid #dc2626 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	margin: 0 0 0 10px !important;
}

.cb-as-page .btn.btn-rounded.btn-danger:not(.btn-sm):not(.btn-xs):hover,
.cb-as-page button.btn-rounded.btn-danger:not(.btn-sm):not(.btn-xs):hover {
	background: #b91c1c !important;
	border-color: #b91c1c !important;
	color: #fff !important;
}

/* Right-side floating sticky save/discard icon buttons — uniform circle */
.cb-as-page .fixed-action-btn {
	width: 44px;
	height: 44px;
}

.cb-as-page .fixed-action-btn .btn,
.cb-as-page .fixed-action-btn button.btn {
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 16px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
	margin: 0 !important;
	gap: 0 !important;
}

.cb-as-page .fixed-action-btn .btn i,
.cb-as-page .fixed-action-btn .btn .fa,
.cb-as-page .fixed-action-btn .btn .fas,
.cb-as-page .fixed-action-btn .btn svg {
	color: #fff !important;
	fill: #fff !important;
}

.cb-as-page .fixed-action-btn .btn.btn-success {
	background: #16a34a !important;
	background-image: none !important;
	border: 1px solid #16a34a !important;
	color: #fff !important;
}

.cb-as-page .fixed-action-btn .btn.btn-success:hover {
	background: #15803d !important;
	border-color: #15803d !important;
	color: #fff !important;
}

.cb-as-page .fixed-action-btn .btn.btn-danger {
	background: #dc2626 !important;
	background-image: none !important;
	border: 1px solid #dc2626 !important;
	color: #fff !important;
}

.cb-as-page .fixed-action-btn .btn.btn-danger:hover {
	background: #b91c1c !important;
	border-color: #b91c1c !important;
	color: #fff !important;
}

/* Consistent breathing room below the fixed top navbar — apply once on the
   outermost wrapper, then zero out inner mains so it doesn't stack. */
main.cb_main,
body > main:not(.cb_main),
body > div.main {
	padding-top: 24px !important;
}

/* Zero out any inner <main> that lives anywhere inside div.main so the outer
   24px padding doesn't stack with MDB's default 5.5rem on main.v-main / nested
   <main> tags (academy settings, Vue dashboards, etc.). */
body > div.main main,
body > div.main main.v-main {
	padding-top: 0 !important;
}

/* cb-as-page sits inside the inner main; the outer div.main already provides
   the 24px breathing room — keep cb-as-page's vertical padding minimal. */
.cb-as-page {
	padding-top: 0;
}

/* MDB switch — ensure the underlying <input type="checkbox"> stays hidden
   ONLY when the legacy MDB `.lever` pattern is used. Without :has(.lever),
   this rule used to hide the input even on the new CSS-only switch pattern
   (where the input itself is the visual switch via ::before pseudo). */
.switch:has(.lever) input[type="checkbox"],
.switch label:has(.lever) input[type="checkbox"] {
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	position: absolute !important;
}

.switch:has(.lever) input[type="checkbox"]::before,
.switch label:has(.lever) input[type="checkbox"]::before,
.switch:has(.lever) input[type="checkbox"]::after,
.switch label:has(.lever) input[type="checkbox"]::after {
	display: none !important;
	content: none !important;
}

/* Trainee sidebar — language flag icon size override
   The generic .ui-navigation.left-nav .top img rule forces 35×35 circle, which
   makes the language flag look much larger than the FontAwesome icons next to it.
   Match the flag size to the other sidebar icons (~18px wide, rectangle). */
.sidebar-lang-menu .sidebar-lang-toggle img {
	width: 20px !important;
	height: auto !important;
	border-radius: 2px !important;
}

/* Section header */
.cb-md-section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin-top: 40px;
	margin-bottom: 16px;
}

/* Inside a header wrapper (e.g. cb-md-ws-header) it shouldn't get extra top margin
   because the wrapper itself spaces the section. */
.cb-md-ws-header .cb-md-section-header,
.cb-md-meet-wrap .cb-md-section-header {
	margin-top: 0;
}

/* The wrapper itself handles spacing for sections that use it */
.cb-md-ws-header {
	margin-top: 40px;
}

.cb-md-section-header > i {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.4);
}

/* Hero card — welcome banner with overlay */
.cb-md-hero {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	min-height: 280px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.cb-md-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 0.35) 100%);
}

.cb-md-hero-body {
	position: relative;
	z-index: 1;
	padding: 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cb-md-hero-body h1 {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.88);
	margin: 0 0 12px 0;
}

.cb-md-hero-body .cb-md-hero-subtitle {
	font-size: 16px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.65);
	margin: 0;
}

/* Last viewed product card */
.cb-md-last-viewed {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	min-height: 280px;
	display: flex;
	flex-direction: column;
}

.cb-md-last-viewed-image {
	flex: 0 0 auto;
	height: 140px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cb-md-last-viewed-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cb-md-last-viewed-body {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cb-md-last-viewed-body .label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.45);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 4px;
}

.cb-md-last-viewed-body h3 {
	font-size: 18px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.88);
	margin: 0 0 8px;
	line-height: 1.3;
}

.cb-md-last-viewed-body .progress-text {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.55);
	margin: 0 0 14px;
	flex-grow: 1;
}

/* Uniform buttons — primary action (theme-aware via btn-primary) */
.cb-md-btn-primary {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s;
	white-space: nowrap;
	line-height: 1;
	box-shadow: none !important;
	text-decoration: none !important;
	color: #fff !important;
}

.cb-md-btn-primary:hover {
	opacity: 0.92;
	text-decoration: none !important;
	color: #fff !important;
}

/* Uniform secondary action / quick link */
.cb-md-btn-secondary {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.7) !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	white-space: nowrap;
	line-height: 1;
	box-shadow: none !important;
	text-decoration: none !important;
}

.cb-md-btn-secondary:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.24) !important;
	color: rgba(0, 0, 0, 0.85) !important;
	text-decoration: none !important;
}

.cb-md-btn-secondary > i {
	font-size: 13px;
	color: inherit;
}

/* Quick actions row — flex with wrap */
.cb-md-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Social icons grid (Contact info) */
.cb-md-social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.cb-md-social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.04);
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	transition: background 0.15s, color 0.15s, transform 0.15s;
	text-decoration: none !important;
}

.cb-md-social-icons a:hover {
	background: rgba(0, 0, 0, 0.08);
	color: rgba(0, 0, 0, 0.85);
	transform: translateY(-1px);
}

.cb-md-social-icons a > span {
	display: none;
}

/* Workspace info card */
.cb-md-workspace-card-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	margin-bottom: 16px;
}

.cb-md-workspace-card-header img {
	max-width: 100px;
	height: auto;
	border-radius: 8px;
}

.cb-md-workspace-card-header .admin-info h6 {
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.5);
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cb-md-workspace-card-header .admin-info .admin-name {
	font-size: 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 0 0 8px;
}

/* Filter cell — uniform height across all filters in a row (Dashboard My Contents / Available contents) */
.cb-md-filter-cell {
	margin-top: 12px;
}

.cb-md-filter-cell .md-form,
.cb-md-filter-cell .input-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.cb-md-filter-cell .input-group .input-group-prepend .input-group-text {
	height: 40px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-right: none;
	border-radius: 8px 0 0 8px;
	color: rgba(0, 0, 0, 0.55);
	padding: 0 10px;
}

.cb-md-filter-cell .input-group .form-control {
	height: 40px !important;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-left: none;
	border-radius: 0 8px 8px 0 !important;
	padding: 0 12px;
	font-size: 14px;
	box-shadow: none !important;
}

.cb-md-filter-cell .input-group .form-control:focus {
	border-color: rgba(0, 0, 0, 0.32);
	box-shadow: none !important;
}

/* mdb-select select wrapper inside filter cell — same height alignment */
.cb-md-filter-cell .mdb-select + .select-wrapper {
	margin-top: 0 !important;
}

.cb-md-filter-cell .mdb-select + .select-wrapper .select-dropdown {
	height: 40px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
	background: #ffffff;
	line-height: 38px;
	margin: 0;
}

/* Native select fallback */
.cb-md-filter-cell select.mdb-select {
	height: 40px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	padding: 0 12px;
}

/* Collapsible section card (My learn success / My level of learning style) */
.cb-md-collapse-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.cb-md-collapse-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	cursor: pointer;
	user-select: none;
	text-decoration: none !important;
	color: inherit !important;
	transition: background 0.2s;
}

.cb-md-collapse-toggle:hover {
	background: rgba(0, 0, 0, 0.02);
	color: inherit !important;
	text-decoration: none !important;
}

.cb-md-collapse-toggle h2,
.cb-md-collapse-toggle h4 {
	font-size: 16px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cb-md-collapse-toggle h2 > i,
.cb-md-collapse-toggle h4 > i {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.35);
	font-weight: 400;
}

.cb-md-collapse-icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.5);
	font-size: 12px;
	transition: transform 0.3s ease, background 0.2s, color 0.2s;
	flex-shrink: 0;
}

.cb-md-collapse-toggle:hover .cb-md-collapse-icon {
	background: rgba(0, 0, 0, 0.10);
	color: rgba(0, 0, 0, 0.75);
}

.cb-md-collapse-toggle.collapsed .cb-md-collapse-icon {
	transform: rotate(-90deg);
}

.cb-md-collapse-body {
	padding: 4px 24px 24px;
}

.cb-md-collapse-body > .row:first-child,
.cb-md-collapse-body > div:first-child {
	margin-top: 0;
}

/* Contact info row */
.cb-md-contact-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.7);
	margin-bottom: 6px;
}

.cb-md-contact-row > i {
	width: 16px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.4);
}

/* ===================================================================
   Member Dashboard — Calendar / Appointments (cb-md-cal-*)
   =================================================================== */

/* Card wrapper for full calendar block */
.cb-md-cal-wrap {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

/* 3-column grid (calendars | upcoming | calendar widget) */
.cb-md-cal-grid {
	display: grid;
	grid-template-columns: 260px 320px 1fr;
	min-height: 600px;
}

@media (max-width: 1199px) {
	.cb-md-cal-grid {
		grid-template-columns: 240px 1fr;
	}
	.cb-md-cal-col--upcoming {
		grid-column: 1 / -1;
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		border-right: none !important;
	}
}

@media (max-width: 767px) {
	.cb-md-cal-grid {
		grid-template-columns: 1fr;
	}
	.cb-md-cal-col {
		border-right: none !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}
}

.cb-md-cal-col {
	padding: 18px 18px 22px;
	display: flex;
	flex-direction: column;
}

.cb-md-cal-col + .cb-md-cal-col {
	border-left: 1px solid rgba(0, 0, 0, 0.06);
}

/* Subsection title inside calendar columns */
.cb-md-cal-sub-title {
	font-size: 11px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 4px 0 12px;
}

.cb-md-cal-sub-title + .cb-md-cal-sub-title {
	margin-top: 18px;
}

/* Calendar list items (left column) */
.cb-md-cal-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cb-md-cal-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	transition: background 0.15s;
	position: relative;
}

.cb-md-cal-list-item:hover {
	background: rgba(0, 0, 0, 0.03);
}

.cb-md-cal-list-item .form-check {
	margin: 0;
	padding: 0;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cb-md-cal-list-item .form-check-input {
	position: relative;
	margin: 0;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	cursor: pointer;
}

.cb-md-cal-list-item .form-check-label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.78);
	cursor: pointer;
	padding-left: 0 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cb-md-cal-list-item .form-check-label::before,
.cb-md-cal-list-item .form-check-label::after {
	display: none !important;
}

/* Color swatch (replaces the colorPicker round-bg-input) */
.cb-md-cal-list-item .colorPickerMain {
	flex-shrink: 0;
}

.cb-md-cal-list-item .round-bg-input {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	cursor: pointer;
	padding: 0 !important;
	font-size: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.cb-md-cal-list-item .edit-item,
.cb-md-cal-list-item .delete-item {
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.15s;
}

.cb-md-cal-list-item:hover .edit-item,
.cb-md-cal-list-item:hover .delete-item {
	opacity: 1;
}

.cb-md-cal-list-item .edit-item a,
.cb-md-cal-list-item .delete-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	color: rgba(0, 0, 0, 0.45);
	font-size: 11px;
	transition: background 0.15s, color 0.15s;
	text-decoration: none !important;
}

.cb-md-cal-list-item .edit-item a:hover {
	background: rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.85);
}

.cb-md-cal-list-item .delete-item a:hover {
	background: rgba(220, 53, 69, 0.10);
	color: #dc3545;
}

/* "Add calendar" button at bottom of list */
.cb-md-cal-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 36px;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.65) !important;
	background: #ffffff !important;
	border: 1px dashed rgba(0, 0, 0, 0.18) !important;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	text-decoration: none !important;
	box-shadow: none !important;
}

.cb-md-cal-add-btn:hover {
	background: rgba(0, 0, 0, 0.02) !important;
	border-color: rgba(0, 0, 0, 0.32) !important;
	color: rgba(0, 0, 0, 0.85) !important;
	text-decoration: none !important;
}

/* Upcoming items (middle column) */
.cb-md-cal-upcoming-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 6px;
	transition: background 0.15s;
}

.cb-md-cal-upcoming-item:hover {
	background: rgba(0, 0, 0, 0.02);
}

.cb-md-cal-upcoming-avatar {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.cb-md-cal-upcoming-body {
	flex: 1;
	min-width: 0;
}

.cb-md-cal-upcoming-title {
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
	margin: 0 0 2px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cb-md-cal-upcoming-sub {
	font-size: 11px;
	color: rgba(0, 0, 0, 0.5);
	margin: 0 0 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cb-md-cal-upcoming-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 11px;
	color: rgba(0, 0, 0, 0.55);
	margin-top: 2px;
}

.cb-md-cal-upcoming-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.cb-md-cal-upcoming-meta > span > i {
	font-size: 10px;
	color: rgba(0, 0, 0, 0.4);
}

.cb-md-cal-upcoming-action {
	flex-shrink: 0;
}

.cb-md-cal-upcoming-action > i.fa-ellipsis-h {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	font-size: 12px;
}

.cb-md-cal-upcoming-action > i.fa-ellipsis-h:hover {
	background: rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.85);
}

.cb-md-cal-empty {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.45);
	padding: 6px 10px;
	font-style: italic;
}

/* Calendar widget toolbar (right column) */
.cb-md-cal-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.cb-md-cal-toolbar-left,
.cb-md-cal-toolbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cb-md-cal-view-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.cb-md-cal-view-btn:hover,
.cb-md-cal-view-btn:focus,
.cb-md-cal-view-btn:active {
	background: rgba(0, 0, 0, 0.02) !important;
	color: rgba(0, 0, 0, 0.9) !important;
	border-color: rgba(0, 0, 0, 0.24) !important;
}

.cb-md-cal-view-btn::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f078";
	font-size: 9px;
	margin-left: 4px;
	border: none;
	color: inherit;
}

.cb-md-cal-today-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	margin: 0 !important;
}

.cb-md-cal-today-btn:hover,
.cb-md-cal-today-btn:focus {
	background: rgba(0, 0, 0, 0.02) !important;
	color: rgba(0, 0, 0, 0.9) !important;
	border-color: rgba(0, 0, 0, 0.24) !important;
}

.cb-md-cal-nav-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.04);
	color: rgba(0, 0, 0, 0.55) !important;
	font-size: 13px !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.cb-md-cal-nav-btn:hover {
	background: rgba(0, 0, 0, 0.10);
	color: rgba(0, 0, 0, 0.85) !important;
}

.cb-md-cal-render-range {
	font-size: 14px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.78);
	margin-left: 4px !important;
}

/* TUI calendar surface polish */
.cb-md-cal-col--widget #calendar {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ===================================================================
   Member Dashboard — Your Meetings / Interesting events (cb-md-meet-*)
   =================================================================== */

/* Two-column wrap: meetings (8) + interesting events (4) */
.cb-md-meet-wrap {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 24px;
	align-items: start;
}

@media (max-width: 991px) {
	.cb-md-meet-wrap {
		grid-template-columns: 1fr;
	}
}

.cb-md-meet-wrap .cb-md-meet-side {
	position: sticky;
	top: 100px;
}

@media (max-width: 991px) {
	.cb-md-meet-wrap .cb-md-meet-side {
		position: static;
	}
}

/* Vertical tab navigation (replaces nav-pills) */
.cb-md-meet-tabs {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 20px;
}

@media (max-width: 767px) {
	.cb-md-meet-tabs {
		grid-template-columns: 1fr;
	}
}

.cb-md-meet-tabnav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	align-self: start;
}

.cb-md-meet-tabnav .nav-link {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.65) !important;
	border-radius: 8px;
	transition: background 0.15s, color 0.15s;
	background: transparent !important;
	border: none !important;
	text-decoration: none !important;
}

.cb-md-meet-tabnav .nav-link strong {
	font-weight: 600;
}

.cb-md-meet-tabnav .nav-link:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	color: rgba(0, 0, 0, 0.85) !important;
}

.cb-md-meet-tabnav .nav-link.active {
	background: rgba(37, 99, 235, 0.08) !important;
	color: #2563EB !important;
}

/* Meeting cards grid */
.cb-md-meet-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (max-width: 575px) {
	.cb-md-meet-grid {
		grid-template-columns: 1fr;
	}
}

/* Single meeting card */
.cb-md-meet-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	transition: transform 0.15s, box-shadow 0.15s;
}

.cb-md-meet-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.cb-md-meet-card-image {
	height: 130px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
}

.cb-md-meet-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-md-meet-card-body {
	padding: 12px 16px 14px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cb-md-meet-card-title {
	font-size: 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.88);
	margin: 0 0 4px;
	line-height: 1.35;
}

.cb-md-meet-card-with {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.55);
	margin: 0 0 8px;
}

.cb-md-meet-card-meta {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.7);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cb-md-meet-card-meta-label {
	font-size: 10px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.45);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: 4px;
}

.cb-md-meet-card-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.cb-md-meet-card-actions .btn {
	flex: 1;
	min-width: 0;
}

/* Re-use cb-md-btn-* tokens; small variant for inside cards */
.cb-md-btn-sm {
	height: 34px !important;
	padding: 0 12px !important;
	font-size: 12px !important;
}

.cb-md-btn-danger {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
	color: #dc3545 !important;
	background: rgba(220, 53, 69, 0.08) !important;
	border: 1px solid rgba(220, 53, 69, 0.16) !important;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	text-decoration: none !important;
	box-shadow: none !important;
}

.cb-md-btn-danger:hover {
	background: rgba(220, 53, 69, 0.14) !important;
	border-color: rgba(220, 53, 69, 0.28) !important;
	color: #dc3545 !important;
}

/* Empty state inside meetings tabs */
.cb-md-meet-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: #ffffff;
	border: 1px dashed rgba(0, 0, 0, 0.10);
	border-radius: 12px;
	color: rgba(0, 0, 0, 0.55);
	text-align: center;
}

.cb-md-meet-empty > i {
	font-size: 28px;
	color: rgba(0, 0, 0, 0.25);
	margin-bottom: 12px;
}

.cb-md-meet-empty > h4,
.cb-md-meet-empty > p {
	font-size: 14px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.65);
	margin: 0;
}

/* Interesting events (right sticky column) */
.cb-md-events-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 1199px) and (min-width: 992px) {
	.cb-md-events-list {
		grid-template-columns: 1fr;
	}
}

.cb-md-event-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s;
}

.cb-md-event-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
	text-decoration: none !important;
}

.cb-md-event-card-image {
	height: 80px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
}

.cb-md-event-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-md-event-card-body {
	padding: 8px 12px 12px;
}

.cb-md-event-card-date {
	font-size: 11px;
	color: rgba(0, 0, 0, 0.55);
	font-weight: 600;
	margin: 0 0 2px;
}

.cb-md-event-card-title {
	font-size: 13px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.88) !important;
	margin: 0;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cb-md-events-empty {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.45);
	padding: 12px;
	font-style: italic;
	text-align: center;
	border: 1px dashed rgba(0, 0, 0, 0.10);
	border-radius: 10px;
}

/* ===================================================================
   Member Dashboard — My Available Workspaces (cb-md-ws-*)
   =================================================================== */

/* Section header row with search */
.cb-md-ws-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.cb-md-ws-header .cb-md-section-header {
	margin-bottom: 0;
}

.cb-md-ws-search {
	width: 320px;
	max-width: 100%;
}

.cb-md-ws-search .input-group {
	margin: 0 !important;
}

.cb-md-ws-search .input-group-prepend .input-group-text {
	height: 40px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-right: none;
	border-radius: 8px 0 0 8px;
	color: rgba(0, 0, 0, 0.55);
	padding: 0 12px;
}

.cb-md-ws-search .form-control {
	height: 40px !important;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-left: none;
	border-radius: 0 8px 8px 0 !important;
	padding: 0 12px !important;
	font-size: 14px;
	box-shadow: none !important;
	margin: 0 !important;
	background: #ffffff !important;
}

.cb-md-ws-search .form-control:focus {
	border-color: rgba(0, 0, 0, 0.32);
	box-shadow: none !important;
}

/* Tile / List view toggle (My Contents) */
.cb-md-view-toggle {
	display: inline-flex;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	padding: 3px;
	box-shadow: none;
}

.cb-md-view-toggle-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.65) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.cb-md-view-toggle-btn input[type=radio] {
	display: none;
}

.cb-md-view-toggle-btn:hover {
	color: rgba(0, 0, 0, 0.85) !important;
}

.cb-md-view-toggle-btn.active {
	background: rgba(37, 99, 235, 0.10) !important;
	color: #2563EB !important;
}

.cb-md-view-toggle-btn > i {
	font-size: 11px;
}

/* "Include free products" inline toggle next to Available contents header */
.cb-md-include-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.7);
	padding: 8px 14px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 8px;
}

.cb-md-include-toggle input[type=checkbox] {
	margin: 0;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.cb-md-include-toggle label {
	margin: 0;
	cursor: pointer;
	font-weight: 500;
}

/* Tile grid */
.cb-md-ws-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

@media (max-width: 1399px) {
	.cb-md-ws-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1199px) {
	.cb-md-ws-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
	.cb-md-ws-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.cb-md-ws-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tile card */
.cb-md-ws-tile {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	cursor: pointer;
	transition: transform 0.18s, box-shadow 0.18s;
	position: relative;
}

.cb-md-ws-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

.cb-md-ws-tile-image {
	position: relative;
	aspect-ratio: 16 / 10;
	background: rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.cb-md-ws-tile-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-md-ws-tile-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	border-radius: 999px;
	backdrop-filter: blur(4px);
}

.cb-md-ws-tile-badge > i {
	font-size: 10px;
}

.cb-md-ws-tile-body {
	padding: 10px 14px 14px;
}

.cb-md-ws-tile-title {
	font-size: 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	margin: 0;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 36px;
}

.cb-md-ws-empty {
	text-align: center;
	padding: 32px 16px;
	color: rgba(0, 0, 0, 0.55);
}

.cb-md-ws-empty img {
	max-width: 180px;
	opacity: 0.65;
}

/* ===================================================================
   Member Dashboard — Available Groups (cb-md-grp-*)
   reuses cb-md-ws-grid / cb-md-ws-tile with extra badge variants
   =================================================================== */

.cb-md-grp-tile-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

.cb-md-grp-tile-badge--public {
	background: #22c55e;
}

.cb-md-grp-tile-badge--private {
	background: #f59e0b;
}

.cb-md-grp-tile-members {
	position: absolute;
	bottom: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 999px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
}

.cb-md-grp-tile-members > i {
	font-size: 10px;
}

/* "View all groups" CTA centered below grid */
.cb-md-grp-cta {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.cb-md-grp-cta .btn,
.cb-md-grp-cta a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 22px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.75) !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none !important;
}

.cb-md-grp-cta .btn:hover,
.cb-md-grp-cta a:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.24) !important;
	color: rgba(0, 0, 0, 0.9) !important;
}

/* ===================================================================
   Member Dashboard — News (cb-md-news-*)
   =================================================================== */

.cb-md-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.cb-md-news-item {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	text-decoration: none !important;
	transition: transform 0.18s, box-shadow 0.18s;
	position: relative;
}

.cb-md-news-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
	text-decoration: none !important;
}

.cb-md-news-item > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit !important;
	text-decoration: none !important;
}

.cb-md-news-image {
	aspect-ratio: 16 / 9;
	background: rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.cb-md-news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-md-news-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cb-md-news-date {
	font-size: 11px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 6px;
}

.cb-md-news-title {
	font-size: 15px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.88);
	margin: 0 0 8px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


.cb-md-news-excerpt {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cb-md-news-comments-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: rgba(0, 0, 0, 0.65);
	border-radius: 999px;
	backdrop-filter: blur(4px);
}

.cb-md-news-comments-badge > i {
	font-size: 10px;
}

/* Affiliate-specific meta line under title */
.cb-md-aff-meta {
	font-size: 11px;
	color: rgba(0, 0, 0, 0.55);
	margin: 4px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

.cb-md-aff-meta-sep {
	color: rgba(0, 0, 0, 0.25);
	margin: 0 2px;
}

/* ===================================================================
   Member Dashboard — Experts (cb-md-exp-*)
   masonry-like grid with first card highlighted
   =================================================================== */

.cb-md-exp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.cb-md-exp-grid .cb-md-exp-card:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 767px) {
	.cb-md-exp-grid .cb-md-exp-card:first-child {
		grid-column: span 1;
		grid-row: span 1;
	}
}

.cb-md-exp-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: transform 0.18s, box-shadow 0.18s;
	position: relative;
}

.cb-md-exp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

.cb-md-exp-card > a {
	color: inherit !important;
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cb-md-exp-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
}

.cb-md-exp-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-md-exp-grid .cb-md-exp-card:first-child .cb-md-exp-image {
	aspect-ratio: 4 / 3;
}

.cb-md-exp-body {
	padding: 12px 16px 16px;
	text-align: center;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.cb-md-exp-name {
	font-size: 15px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.88);
	margin: 0 0 6px;
}

.cb-md-exp-grid .cb-md-exp-card:first-child .cb-md-exp-name {
	font-size: 18px;
}

.cb-md-exp-about {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cb-md-exp-highlight-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: #2563EB;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
	z-index: 2;
}

/* ===================================================================
   Member Dashboard — Category View (cb-md-cat-*)
   =================================================================== */

.cb-md-cat-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

@media (max-width: 1199px) {
	.cb-md-cat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
	.cb-md-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
	.cb-md-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

.cb-md-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 12px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cb-md-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
	border-color: rgba(37, 99, 235, 0.30);
}

.cb-md-cat-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cb-md-cat-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cb-md-cat-name {
	font-size: 13px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.78);
	margin: 0;
	line-height: 1.3;
}

/* Breadcrumb pill */
.cb-md-cat-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 8px 8px 8px 12px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	width: fit-content;
	max-width: 100%;
}

.cb-md-cat-breadcrumb .cb-md-cat-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.75);
	background: rgba(0, 0, 0, 0.04);
	border-radius: 999px;
	border: none;
	cursor: pointer;
}

.cb-md-cat-breadcrumb .cb-md-cat-back:hover {
	background: rgba(0, 0, 0, 0.08);
}

.cb-md-cat-breadcrumb ul {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.65);
}

.cb-md-cat-breadcrumb ul li::after {
	content: "›";
	margin: 0 0 0 8px;
	color: rgba(0, 0, 0, 0.25);
}

.cb-md-cat-breadcrumb ul li:last-child::after {
	content: "";
}

.cb-md-cat-breadcrumb a {
	color: rgba(0, 0, 0, 0.65);
	text-decoration: none;
}

.cb-md-cat-breadcrumb a:hover {
	color: rgba(0, 0, 0, 0.9);
}

/* Todos: per-tab active accent overrides for cb-md-meet-tabnav */
.cb-md-todo-tabs #v-pills-completed-tab.nav-link.active {
	background: rgba(34, 197, 94, 0.10) !important;
	color: #16a34a !important;
}

.cb-md-todo-tabs #v-pills-expired-tab.nav-link.active {
	background: rgba(245, 158, 11, 0.12) !important;
	color: #b45309 !important;
}

/* SweetAlert2 fix: the library inlines `display:none` on its placeholder form
 * fields (input/textarea/select/file/radio/checkbox) when not in use, but some
 * project styles override that with `display: block`, causing an empty white
 * input box to appear above the OK/Cancel buttons. Re-enforce hidden state
 * while still letting SweetAlert2 show fields it actively configures (those
 * get `style="display: block"` set by the library). */
.swal2-popup .swal2-input[style*="display: none"],
.swal2-popup .swal2-textarea[style*="display: none"],
.swal2-popup .swal2-file[style*="display: none"],
.swal2-popup .swal2-select[style*="display: none"],
.swal2-popup .swal2-radio[style*="display: none"],
.swal2-popup .swal2-checkbox[style*="display: none"],
.swal2-popup .swal2-range[style*="display: none"] {
	display: none !important;
}