/* Staan LMS chrome — yellow / black / white (Rosalie Swarte herontwerp). */

:root {
    --sa-yellow: #fab523;
    --sa-black: #000;
    --sa-white: #fff;
    --sa-gray: #f0f0f0;
    --sa-green: #3fcc51;
    --sa-red: #c04e29;
    --sa-side: 240px;
    --sa-side-min: 76px;
    --sa-top: 64px;
    --sa-radius: 15px;
}

body.sa-ui-guest #page-login-index .login-form .btn-primary,
body.sa-ui-guest .loginform .btn-primary,
body.sa-ui-guest #loginbtn,
body#page-login-index .btn-primary {
    background: var(--sa-black) !important;
    border-color: var(--sa-black) !important;
    color: #fff !important;
    border-radius: 999px !important;
    min-width: 220px;
    font-weight: 700;
}
body#page-login-index input[type="password"] {
    background: #f7e7c2;
}

body.sa-ui {
    background: #fff;
}
body.sa-ui .sa-sidebar {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sa-side);
    background: var(--sa-black);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 16px;
    overflow: auto;
}
body.sa-ui .sa-sidebar-brand {
    display: flex;
    justify-content: center;
    margin: 4px 0 22px;
}
body.sa-ui .sa-sidebar-brand img {
    width: 92px;
    height: 92px;
}
body.sa-ui .sa-sidebar-nav,
body.sa-ui .sa-sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.sa-ui .sa-sidebar-foot {
    margin-top: auto;
    padding-top: 18px;
}
body.sa-ui .sa-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
body.sa-ui .sa-side-link:hover,
body.sa-ui .sa-side-link.is-active {
    background: var(--sa-yellow);
    color: #000 !important;
}
body.sa-ui .sa-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
body.sa-ui .sa-i-dash { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h8v8H3v-8zm10 7h8v8h-8v-8z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h8v8H3v-8zm10 2h8v8h-8v-8z'/></svg>"); }
body.sa-ui .sa-i-courses { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z'/></svg>"); }
body.sa-ui .sa-i-people { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11a4 4 0 10-8 0 4 4 0 008 0zM4 20a8 8 0 0116 0H4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11a4 4 0 10-8 0 4 4 0 008 0zM4 20a8 8 0 0116 0H4z'/></svg>"); }
body.sa-ui .sa-i-progress { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V6h-2v8h6v-2h-4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V6h-2v8h6v-2h-4z'/></svg>"); }
body.sa-ui .sa-i-cal { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 8H4v10h16V10z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 8H4v10h16V10z'/></svg>"); }
body.sa-ui .sa-i-grid { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/></svg>"); }
body.sa-ui .sa-i-files { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6 2h8l6 6v14H6V2zm8 1.5V9h5.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6 2h8l6 6v14H6V2zm8 1.5V9h5.5'/></svg>"); }
body.sa-ui .sa-i-lang { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c.7 0 2.4 2.6 2.8 7H9.2C9.6 6.6 11.3 4 12 4zm-4.9 9h9.8c-.4 4.4-2.1 7-4.9 7s-4.5-2.6-4.9-7z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20z'/></svg>"); }
body.sa-ui .sa-i-help { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm1.1-7.5c-.3.5-.7.9-1.1 1.2-.5.4-.9.7-1 .1.3 0-.2.5-.2 1.2h-2c0-1.2.3-2 1.2-2.7.6-.5 1.1-.9 1.3-1.3.2-.4 0-.9-.6-.9-.6 0-1 .3-1.3.9l-1.7-1c.6-1.2 1.8-2 3.3-2 2.1 0 3.4 1.2 3.4 3.1 0 .7-.2 1.3-.7 1.9z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle fill='black' cx='12' cy='12' r='10'/></svg>"); }
body.sa-ui .sa-i-cog { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 8a4 4 0 110 8 4 4 0 010-8zm8.9 4l-1.6-1 .3-1.8-1.7-1.1-1.4 1.1-1.8-.3L13 7.1h-2l-.7 1.8-1.8.3-1.4-1.1-1.7 1.1.3 1.8L4 12l1.6 1-.3 1.8 1.7 1.1 1.4-1.1 1.8.3.7 1.8h2l.7-1.8 1.8-.3 1.4 1.1 1.7-1.1-.3-1.8 1.6-1z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle fill='black' cx='12' cy='12' r='3'/></svg>"); }
body.sa-ui .sa-i-collapse { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15 6l-6 6 6 6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15 6l-6 6 6 6'/></svg>"); }
body.sa-ui .sa-i-logout { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 17v2H4V5h6v2H6v10h4zm3-1l5-4-5-4v3H8v2h5v3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 17v2H4V5h6v2H6v10h4zm3-1l5-4-5-4v3H8v2h5v3z'/></svg>"); }

body.sa-ui .sa-topbar {
    position: sticky;
    top: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--sa-top);
    padding: 10px 20px;
    background: #fff;
    margin-left: var(--sa-side);
    border-bottom: 1px solid #eee;
}
body.sa-ui .sa-academy {
    background: var(--sa-yellow);
    color: #000 !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 16px;
    text-decoration: none !important;
    white-space: nowrap;
}
body.sa-ui .sa-search {
    flex: 1;
    display: flex;
    max-width: 640px;
    background: var(--sa-gray);
    border-radius: 999px;
    overflow: hidden;
}
body.sa-ui .sa-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 10px 16px;
}
body.sa-ui .sa-search button {
    border: 0;
    background: transparent;
    padding: 0 14px;
    font-size: 18px;
}
body.sa-ui .sa-top-user {
    display: none !important;
}
body.sa-ui .sa-burger { display: none; border: 0; background: var(--sa-yellow); border-radius: 8px; padding: 6px 10px; font-size: 18px; }

body.sa-ui #page,
body.sa-ui .our-dashbord {
    padding-left: var(--sa-side) !important;
    padding-top: calc(var(--sa-top) + 8px) !important;
    box-sizing: border-box;
}
/* Elan nest een tweede #page.container in drawers; die mag niet nóg eens de zijbalk-offset krijgen. */
body.sa-ui #page #page,
body.sa-ui #page.drawers #page,
body.sa-ui #page.drawers #page.container,
body.sa-ui #page.drawers .bottom-region-main-box {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.sa-ui #page-content {
    padding-left: 0 !important;
    padding-top: 0 !important;
}
body.sa-ui > .sa-dash,
body.sa-ui > .sa-page,
body.sa-ui > .sa-progress-wrap {
    margin-left: var(--sa-side);
    padding-top: calc(var(--sa-top) + 8px);
}
.sa-dash,
.sa-page,
.sa-progress-wrap {
    padding-top: 8px;
}
body.sa-ui .sa-topbar {
    margin-left: 0;
    position: fixed;
    left: var(--sa-side);
    right: 0;
    z-index: 1100;
    padding-right: 220px;
}
body.sa-ui .dashboard_sidebar,
body.sa-ui .page-title-area,
body.sa-ui header.navbar .navbar-nav,
body.sa-ui .primary-navigation,
body.sa-ui .custom-menu,
body.sa-ui nav.navbar .custom_menu,
body.sa-ui .sa-moodle-main,
.sa-moodle-main {
    display: none !important;
}
body.sa-ui header.navbar {
    display: none !important;
}

/* Elan-balk: alleen meldingen/profiel bewaren, rest verbergen zodat hij niet over onze balk ligt. */
body.sa-ui .navbar-area,
body.sa-ui .navbar-area.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: var(--sa-side) !important;
    right: 0 !important;
    width: auto !important;
    height: var(--sa-top) !important;
    min-height: var(--sa-top) !important;
    z-index: 1110 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    animation: none !important;
}
body.sa-ui .navbar-area .elan-responsive-nav,
body.sa-ui .navbar-area .elan-responsive-menu,
body.sa-ui .navbar-area .navbar-brand,
body.sa-ui .navbar-area .navbar-nav,
body.sa-ui .navbar-area .mean-menu,
body.sa-ui .navbar-area .search-box,
body.sa-ui .navbar-area .others-option,
body.sa-ui .navbar-area .others-option-for-responsive {
    display: none !important;
}
body.sa-ui .navbar-area .elan-nav,
body.sa-ui .navbar-area .navbar,
body.sa-ui .navbar-area .container-fluid {
    background: transparent !important;
    box-shadow: none !important;
    height: var(--sa-top);
    min-height: var(--sa-top);
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
body.sa-ui .navbar-area .elan-header-user-sec {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    z-index: 1115;
    display: flex !important;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
}
body.sa-ui .navbar-area .elan-header-user-sec > li,
body.sa-ui .navbar-area .elan-header-user-sec li:first-child,
body.sa-ui .navbar-area .elan-header-user-sec li:nth-child(2) {
    margin: 0 !important;
    display: flex;
    align-items: center;
}
body.sa-ui .navbar-area .editmode-switch-form,
body.sa-ui .navbar-area .editmode-switch-form label,
body.sa-ui .navbar-area .usermenu .usertext,
body.sa-ui .navbar-area .usermenu .login {
    display: none !important;
}
body.sa-ui .navbar-area .elan-header-user-sec .popover-region-toggle,
body.sa-ui .navbar-area .elan-header-user-sec .notification_icon,
body.sa-ui .navbar-area .elan-header-user-sec a.notification-icon,
body.sa-ui .navbar-area .elan-header-user-sec .usermenu .dropdown-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f4f4;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #111 !important;
    box-shadow: none !important;
}
body.sa-ui .navbar-area .elan-header-user-sec img.userpicture {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
body.sa-ui .navbar-area .usermenu .dropdown-toggle::after {
    display: none;
}

body.sa-ui.sa-ui-collapsed {
    --sa-side: var(--sa-side-min);
}
body.sa-ui.sa-ui-collapsed .sa-side-label,
body.sa-ui.sa-ui-collapsed .sa-sidebar-brand img {
    display: none;
}
body.sa-ui.sa-ui-collapsed .sa-sidebar-brand {
    height: 48px;
}

.sa-btn {
    display: inline-block;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    border: 0;
    line-height: 1.3;
}
.sa-btn-cta { background: var(--sa-yellow); color: #000 !important; }
.sa-btn-dark { background: var(--sa-black); color: #fff !important; }
.sa-btn-done { background: var(--sa-green); color: #000 !important; }
.sa-btn-block { display: block; text-align: center; margin-top: 12px; }

.sa-ring {
    --p: 0;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--sa-green) calc(var(--p) * 1%), #e6e6e6 0);
    display: grid;
    place-items: center;
    margin: 0 auto;
}
.sa-ring-small { width: 72px; height: 72px; }
.sa-ring-large { width: 140px; height: 140px; }
.sa-ring-hole {
    background: #fff;
    border-radius: 50%;
    width: 70%;
    height: 70%;
    display: grid;
    place-items: center;
}
.sa-ring-pct { font-weight: 800; font-size: 13px; color: #111; }
.sa-ring-large .sa-ring-pct { font-size: 22px; }
.sa-ring-caption { text-align: center; color: var(--sa-green); font-weight: 700; font-size: 13px; margin: 6px 0 0; }

.sa-dash {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr);
    gap: 18px;
    width: 100%;
    max-width: none;
    margin: 0 0 40px;
    padding: 8px 12px 24px;
}
.sa-panel {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--sa-radius);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.sa-panel h2, .sa-panel h3 { margin-top: 0; }
.sa-panel-center { text-align: center; }
.sa-student-ident { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.sa-student-ident h2 { margin: 0 0 4px; font-size: 22px; }
.sa-muted { color: #666; margin: 0; }
.sa-ident-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.sa-ccard {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.sa-ccard-poster {
    display: block;
    width: 150px;
    height: 92px;
    flex: 0 0 150px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #fab523, #111);
}
body.sa-ui .sa-ccard-img,
.sa-ccard-poster img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.sa-ccard-body h3 { margin: 0 0 4px; font-size: 16px; text-align: left; }
.sa-ccard-blurb { margin: 0 0 8px; color: #555; font-size: 13px; }
.sa-ccard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-ccard-foot .sa-ring-caption { display: none; }
.sa-done-box {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    background: #fafafa;
    border-radius: var(--sa-radius);
    padding: 16px;
    margin-top: 16px;
}
.sa-list { list-style: none; padding: 0; margin: 0 0 8px; }
.sa-list li { padding: 6px 0; border-bottom: 1px solid #f3f3f3; font-size: 14px; }
.sa-news a { color: #000; font-weight: 600; }

.sa-page { width: 100%; max-width: none; margin: 0 0 48px; padding: 8px 16px; }
.sa-lead { color: #555; margin-bottom: 20px; }
.sa-faq-grid, .sa-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.sa-tile {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--sa-radius);
    padding: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
}
.sa-tile h3 { margin: 0 0 8px; }
.sa-tile-link { color: inherit; text-decoration: none; display: block; }
.sa-tile-link:hover { border-color: var(--sa-yellow); }
.sa-black-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px;
}
.sa-black-tiles-4 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.sa-staff-hub {
    padding-left: 12px;
    padding-right: 12px;
}
.sa-staff-hub h2 {
    margin: 0 0 14px;
    font-size: 22px;
}
.sa-black-tile {
    background: #000;
    color: #fff !important;
    border-radius: 12px;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none !important;
}
.sa-black-tile:hover { background: #222; color: #fff !important; }

.sa-student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.sa-scard {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--sa-radius);
    padding: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sa-scard-top { display: flex; gap: 10px; align-items: center; }
.sa-scard h3 { margin: 0; font-size: 16px; }
.sa-scard-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sa-scard-path {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sa-scard-path strong { font-size: 14px; }
.sa-scard-path span { color: #555; font-size: 13px; }
.sa-path-bar {
    height: 8px;
    background: #e8e8e8;
    border-radius: 99px;
    overflow: hidden;
    margin-top: 6px;
}
.sa-path-bar-fill {
    display: block;
    height: 100%;
    background: var(--sa-green);
    border-radius: 99px;
}
.sa-path-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.sa-path-panel {
    margin: 0 0 18px;
    padding: 14px 0 6px;
    border-top: 1px solid #f0f0f0;
}
.sa-path-panel h3 { margin: 0 0 6px; }
.sa-path-comp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f3f3;
    font-size: 14px;
}

body.sa-ui .sa-progress-wrap { max-width: none; width: 100%; }

/* Inhoud volle breedte, links tegen de zijbalk.
   Moodle reserveert 285/315px voor course-index/block-drawers; Elan nog eens 280px. */
body.sa-ui .drawer.drawer-right,
body.sa-ui .drawer-toggles .drawer-right-toggle {
    display: none !important;
}
/* Lessenmenu alleen in een training, rechts van het Staan-menu. */
body.sa-ui:not(.path-course):not(.path-mod):not(.pagelayout-course):not(.pagelayout-incourse) .drawer.drawer-left,
body.sa-ui:not(.path-course):not(.path-mod):not(.pagelayout-course):not(.pagelayout-incourse) .drawer-toggles .drawer-left-toggle {
    display: none !important;
}
body.sa-ui.path-course .drawer.drawer-left,
body.sa-ui.path-mod .drawer.drawer-left,
body.sa-ui.pagelayout-course .drawer.drawer-left,
body.sa-ui.pagelayout-incourse .drawer.drawer-left {
    display: flex !important;
    top: var(--sa-top) !important;
    height: calc(100vh - var(--sa-top)) !important;
    z-index: 1040;
}
body.sa-ui.path-course .drawer.drawer-left.show,
body.sa-ui.path-mod .drawer.drawer-left.show,
body.sa-ui.pagelayout-course .drawer.drawer-left.show,
body.sa-ui.pagelayout-incourse .drawer.drawer-left.show {
    left: var(--sa-side) !important;
}
body.sa-ui.path-course .drawer-toggles,
body.sa-ui.path-mod .drawer-toggles,
body.sa-ui.pagelayout-course .drawer-toggles,
body.sa-ui.pagelayout-incourse .drawer-toggles {
    display: block !important;
}
body.sa-ui.path-course .drawer-toggles .drawer-left-toggle,
body.sa-ui.path-mod .drawer-toggles .drawer-left-toggle,
body.sa-ui.pagelayout-course .drawer-toggles .drawer-left-toggle,
body.sa-ui.pagelayout-incourse .drawer-toggles .drawer-left-toggle {
    display: block !important;
    left: var(--sa-side) !important;
    top: calc(var(--sa-top) + 0.7rem) !important;
}
body.sa-ui #page.drawers,
body.sa-ui #page.drawers.show-drawer-left,
body.sa-ui #page.drawers.show-drawer-right,
body.sa-ui #page.drawers.show-drawer-left.show-drawer-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--sa-side) !important;
    padding-right: 24px !important;
    padding-top: calc(var(--sa-top) + 8px) !important;
    margin-top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    width: auto !important;
}
body.sa-ui.path-course #page.drawers.show-drawer-left,
body.sa-ui.path-mod #page.drawers.show-drawer-left,
body.sa-ui.pagelayout-course #page.drawers.show-drawer-left,
body.sa-ui.pagelayout-incourse #page.drawers.show-drawer-left {
    margin-left: 285px !important;
    padding-left: calc(var(--sa-side) + 16px) !important;
}
body.sa-ui.page-mycourses #page.drawers,
body.sa-ui.pagelayout-mycourses #page.drawers,
body.sa-ui.pagelayout-standard #page.drawers,
body.sa-ui.page-mycourses #page.drawers.show-drawer-left,
body.sa-ui.page-mycourses #page.drawers.show-drawer-right,
body.sa-ui.pagelayout-standard #page.drawers.show-drawer-left,
body.sa-ui.pagelayout-standard #page.drawers.show-drawer-right {
    padding-left: var(--sa-side) !important;
}
body.sa-ui #lawenrol-app {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.sa-ui #page.drawers .main-inner,
body.sa-ui.limitedwidth #page.drawers .main-inner,
body.sa-ui.pagelayout-standard #page.drawers .main-inner,
body.sa-ui.pagelayout-mycourses #page.drawers .main-inner,
body.sa-ui.page-mycourses #page.drawers .main-inner,
body.sa-ui #page-my-index.page-mycourses #topofscroll.main-inner,
body.sa-ui .header-maxwidth,
body.sa-ui #page.drawers .footer-popover,
body.sa-ui #topofscroll,
body.sa-ui #page-header,
body.sa-ui #region-main-box,
body.sa-ui #region-main,
body.sa-ui.page-mycourses .block_myoverview,
body.sa-ui.page-mycourses .block_myoverview > .card,
body.sa-ui.page-mycourses .block_myoverview .card-body,
body.sa-ui.page-mycourses .block_myoverview .course-listitem .row {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.sa-ui.page-mycourses .block_myoverview .course-listitem .col-md-9 {
    flex: 1 1 0;
    max-width: none;
    width: auto;
}
body.sa-ui #page.drawers .main-inner {
    padding: 0 0 2rem !important;
}
body.sa-ui #page.drawers div[role="main"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.sa-ui .elan-full-header,
body.sa-ui #page-header,
body.sa-ui .header-maxwidth,
body.sa-ui .header-maxwidth .header-inner,
body.sa-ui .page-context-header,
body.sa-ui .page-header-headings {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}
body.sa-ui .elan-full-header,
body.sa-ui #page-header,
body.sa-ui .header-maxwidth {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.sa-ui .sa-progress-wrap {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.sa-ui.path-local-sa_ui-staff .elan-full-header,
body.sa-ui.path-local-sa_ui-staff #page-header,
body.sa-ui.path-local-sa_ui-reports .elan-full-header,
body.sa-ui.path-local-sa_ui-reports #page-header,
body.sa-ui.path-local-sa_progress .elan-full-header,
body.sa-ui.path-local-sa_progress #page-header {
    display: none !important;
}
body.sa-ui .container,
body.sa-ui .container-lg,
body.sa-ui .container-md,
body.sa-ui .container-sm,
body.sa-ui .container-xl,
body.sa-ui .container-xxl,
body.sa-ui .container-fluid {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.sa-ui .dashboard_main_content,
body.sa-ui .dashboard_main_content .container-fluid,
body.sa-ui .main_content_container,
body.sa-ui .elan-sidebar-collapsed .dashboard_main_content {
    max-width: none !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.sa-report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin: 0 0 22px;
}
.sa-report-field label {
    display: block;
    font-weight: 600;
    margin: 0 0 6px;
}
.sa-report-field select {
    min-width: 200px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fafafa;
    font: inherit;
}
.sa-report-count {
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 4px;
}
.sa-reports .sa-btn-dark {
    display: inline-block;
    margin: 8px 0 18px;
}
.sa-report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 32px;
    background: #fff;
}
.sa-report-table th {
    text-align: left;
    background: #000;
    color: #fff;
    padding: 10px 12px;
    font-weight: 700;
}
.sa-report-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}
.sa-report-table tbody tr:hover td {
    background: #fafafa;
}
.sa-report-other {
    margin-top: 12px;
}
.sa-contact-form {
    max-width: 640px;
}
.sa-contact-form label {
    display: block;
    font-weight: 600;
    margin: 14px 0 6px;
}
.sa-contact-form input[type="text"],
.sa-contact-form input[type="email"],
.sa-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fafafa;
    font: inherit;
}
.sa-contact-form input[readonly] {
    background: #f0f0f0;
    color: #444;
}
.sa-contact-form button,
.sa-contact-form .sa-btn {
    margin-top: 18px;
}

body.sa-ui .sa-progress-homebtn,
body.sa-ui .sa-progress-teaser-btn {
    background: var(--sa-yellow) !important;
    color: #000 !important;
}
body.sa-ui .sa-progress-table th { background: #000; }
body.sa-ui .sa-progress-col.sa-col-done h3 { border-bottom-color: var(--sa-green); }
body.sa-ui .sa-progress-bar span { background: var(--sa-green); }
body.sa-ui .sa-progress-pill.sa-col-done,
body.sa-ui .sa-progress-pill.sa-col-lps { background: var(--sa-yellow); color: #000; }
body.sa-ui .sa-progress-head h2,
body.sa-ui .sa-progress-card a { color: #000; }

@media (max-width: 991px) {
    body.sa-ui .sa-sidebar { transform: translateX(-105%); transition: transform .2s ease; }
    body.sa-ui.sa-ui-open .sa-sidebar { transform: none; }
    body.sa-ui .sa-topbar,
    body.sa-ui #page,
    body.sa-ui #page.drawers,
    body.sa-ui #page.drawers.show-drawer-left,
    body.sa-ui #page.drawers.show-drawer-right,
    body.sa-ui #page-wrapper,
    body.sa-ui #wrapper,
    body.sa-ui .our-dashbord {
        left: 0 !important;
        margin-left: 0 !important;
        padding-left: 12px !important;
    }
    body.sa-ui .sa-topbar,
    body.sa-ui .navbar-area,
    body.sa-ui .navbar-area.is-sticky { left: 0 !important; }
    body.sa-ui .sa-burger { display: inline-block; }
    .sa-dash, .sa-black-tiles, .sa-ccard { grid-template-columns: 1fr; }
}