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

/* Legal affairs rows: clearer heading + more breathing room between each legal
   type, scoped so the shared .cb-as-field styling elsewhere is untouched. */
.cb-legal-field {
	margin: 0 0 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid #eef0f4;
}

.cb-legal-field:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.cb-legal-field-label {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1f2733 !important;
	margin-bottom: 10px !important;
}

/* Legal texts (imprint, privacy, T&C) are long documents, so give their CKEditor
   instances far more room than the generic 120px editable and let the author
   drag them taller. Scoped to the legal rows so other editors keep their size. */
.cb-legal-field .ck.ck-editor__main > .ck-editor__editable {
	min-height: 420px;
	max-height: 70vh;
	overflow-y: auto;
	resize: vertical;
}

@media (max-width: 767px) {
	.cb-legal-field .ck.ck-editor__main > .ck-editor__editable {
		min-height: 260px;
		max-height: 60vh;
	}
}

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

.v-selection-control__input input[type="radio"],
.v-selection-control__input input[type="checkbox"] {
	pointer-events: auto;
}

/* ===================================================================
   Member Dashboard — My documents (cb-md-doc-*)
   Softer card surface + the shared cb-md-btn-* action buttons, so the
   section matches the meeting/product cards instead of raw MDB cards.
   =================================================================== */

.cb-md-doc-section {
	padding-bottom: 24px;
}

/* Unlike .cb-md-card / .cb-md-meet-card this token does NOT force a white
   surface: the card keeps the bootstrap `card` class, so the dashboard theming
   script (Partials/scripts.ctp) paints it bg-white or bg-dark from the tenant
   design. Borders therefore use a mid-grey alpha that stays visible on both.
   No hover lift — only the footer buttons are clickable, the card is not. */
.cb-md-doc-card {
	border: 1px solid rgba(128, 128, 128, 0.22) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	overflow: hidden;
}

.cb-md-doc-card .card-body {
	padding: 16px 18px 14px;
}

.cb-md-doc-card .card-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 4px;
}

.cb-md-doc-card .card-title > i {
	opacity: 0.55;
}

/* Footer carries the actions only — no MDB grey bar, no hard divider */
.cb-md-doc-card .card-footer {
	background: transparent !important;
	border-top: 1px solid rgba(128, 128, 128, 0.18) !important;
	padding: 12px 18px 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Narrow screens: let the actions fill the row instead of stacking ragged */
@media (max-width: 575.98px) {
	.cb-md-doc-card .card-footer > a {
		flex: 1 1 100%;
	}
}