:root .lpx-brand-logo {
    --lpx-logo: url('/images/logo/leptonx/logo-light.png');
    --lpx-logo-icon: url('/images/logo/leptonx/logo-light-thumbnail.png');
}

:root {
    --elearning-surface: #f8fafc;
    --elearning-border: rgba(15, 23, 42, 0.08);
    --elearning-text: #0f172a;
    --elearning-muted: #475569;
    --elearning-font-sans: "Segoe UI Variable Text", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --elearning-font-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 20%),
        linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
    color: var(--elearning-text);
    font-family: var(--elearning-font-sans);
    font-weight: 400;
}

body.elearning-client-mode,
body:has(.client-shell),
body:has(.session-shell),
body:has(.result-shell) {
    --lpx-side-menu-width: 0 !important;
}

body.elearning-client-mode .lpx-sidebar-container,
body:has(.client-shell) .lpx-sidebar-container,
body:has(.session-shell) .lpx-sidebar-container,
body:has(.result-shell) .lpx-sidebar-container,
body.elearning-client-mode .lpx-menu-container,
body:has(.client-shell) .lpx-menu-container,
body:has(.session-shell) .lpx-menu-container,
body:has(.result-shell) .lpx-menu-container,
body.elearning-client-mode .lpx-main-menu-container,
body:has(.client-shell) .lpx-main-menu-container,
body:has(.session-shell) .lpx-main-menu-container,
body:has(.result-shell) .lpx-main-menu-container,
body.elearning-client-mode .lpx-sider,
body:has(.client-shell) .lpx-sider,
body:has(.session-shell) .lpx-sider,
body:has(.result-shell) .lpx-sider,
body.elearning-client-mode .lpx-layout-sider,
body:has(.client-shell) .lpx-layout-sider,
body:has(.session-shell) .lpx-layout-sider,
body:has(.result-shell) .lpx-layout-sider {
    display: none !important;
}

body.elearning-client-mode .lpx-content-container,
body:has(.client-shell) .lpx-content-container,
body:has(.session-shell) .lpx-content-container,
body:has(.result-shell) .lpx-content-container,
body.elearning-client-mode .lpx-content,
body:has(.client-shell) .lpx-content,
body:has(.session-shell) .lpx-content,
body:has(.result-shell) .lpx-content,
body.elearning-client-mode .lpx-page-container,
body:has(.client-shell) .lpx-page-container,
body:has(.session-shell) .lpx-page-container,
body:has(.result-shell) .lpx-page-container,
body.elearning-client-mode main,
body:has(.client-shell) main,
body:has(.session-shell) main,
body:has(.result-shell) main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.elearning-client-mode .lpx-content-container > .container,
body:has(.client-shell) .lpx-content-container > .container,
body:has(.session-shell) .lpx-content-container > .container,
body:has(.result-shell) .lpx-content-container > .container,
body.elearning-client-mode .lpx-page-container > .container,
body:has(.client-shell) .lpx-page-container > .container,
body:has(.session-shell) .lpx-page-container > .container,
body:has(.result-shell) .lpx-page-container > .container {
    max-width: 100% !important;
}

.card,
.portal-card,
.section-panel {
    border-color: var(--elearning-border);
}