/*
 * ================================================================
 *  In2itive LMS — Modern UI Stylesheet
 *  Version: 1.1
 *
 *  Covers:
 *    1.  Design tokens (colours, radii, shadows)
 *    2.  Base / page layout overrides
 *    3.  Header strip  (.lms-header-strip)
 *    4.  Header main row  (.lms-header-main / .lms-header-logo / .lms-header-links)
 *    5.  Navigation bar  (.header-menu / .top-menu)
 *    6.  Tab bars  (#trainingtab, #horizontalTab)
 *    7.  Course grid  (.mcg-*)
 *    8.  Description modal  (.mcg-modal-*)
 *    9.  Sequence cards  (.seq-*)
 *    10. Utilities / mobile
 *    11. Attendance courses
 *    12. Customer certificates  (.cert-*)
 *
 *  Usage:
 *    Add to LmsRoot.Master (or equivalent) AFTER the theme stylesheet:
 *    <link rel="stylesheet" href="/App_Themes/In2itiveLearning/in2itive-modern.css" />
 *
 *    Inline <style> blocks removed from:
 *      - Header.ascx
 *      - LmsHeaderMenu.ascx
 *      - MyCoursesInGrid.ascx
 *      - MyCourses.aspx
 *      - CustomerCertificates.ascx
 * ================================================================
 */


/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
    --lms-orange:        #f0913a;
    --lms-orange-rgb:    240,145,58;    /* for rgba() shadows */
    --lms-orange-dark:   #e07d28;
    --lms-orange-light:  #fff4ec;
    --lms-orange-text:   #c06010;

    --lms-green:         #2eac6d;
    --lms-green-light:   #edfaf3;
    --lms-green-text:    #1a7a4a;

    --lms-red:           #e04646;
    --lms-red-light:     #fef2f2;
    --lms-red-text:      #b91c1c;

    --lms-grey-50:       #f9fafb;
    --lms-grey-100:      #f3f4f6;
    --lms-grey-200:      #e5e7eb;
    --lms-grey-300:      #d1d5db;
    --lms-grey-400:      #9ca3af;
    --lms-grey-500:      #6b7280;
    --lms-grey-700:      #374151;
    --lms-grey-800:      #1f2937;
    --lms-grey-900:      #111827;

    --lms-font:          Montserrat, arial, helvetica, sans-serif;

    --lms-radius-sm:     6px;
    --lms-radius-md:     8px;
    --lms-radius-lg:     12px;
    --lms-radius-xl:     14px;
    --lms-radius-pill:   20px;

    --lms-shadow-card:   0 4px 14px rgba(0,0,0,.07);
    --lms-shadow-drop:   0 8px 24px rgba(0,0,0,.12);
    --lms-shadow-modal:  0 20px 60px rgba(0,0,0,.22);
}


/* ================================================================
   VALIDATOR MESSAGE HIDING
   ASP.NET renders validator error spans in the DOM immediately.
   Hide them by default; show only after a submit attempt.
   ASP.NET sets display:inline on active errors — we restore that
   via the [style*="inline"] attribute selector.
   ================================================================ */

/* Hide all validator spans globally by default.
   Catches: RequiredFieldValidator, RangeValidator, CustomValidator,
   RegularExpressionValidator and NumericTextBox/SimpleTextBox sub-controls. */

/* ID-pattern based */
span[id*="rfv"],
span[id*="rfvl"],
span[id*="rvRange"],
span[id*="rvMin"],
span[id*="cvVal"],
span[id*="reqVal"],
span[id*="Validator"],
span[id*="validator"],
span[id*="Required"],
span[id*="Range"],
/* Color-based (ASP.NET always renders validators with color:Red inline style) */
span[style*="color:Red"],
span[style*="color: Red"],
span[style*="color:red"],
span[style*="color: red"] {
    display: none !important;
    visibility: hidden !important;
}

/* Show when ASP.NET sets display:inline after failed validation */
span[id*="rfv"][style*="inline"],
span[id*="rfvl"][style*="inline"],
span[id*="rvRange"][style*="inline"],
span[id*="rvMin"][style*="inline"],
span[id*="cvVal"][style*="inline"],
span[id*="reqVal"][style*="inline"],
span[id*="Validator"][style*="inline"],
span[id*="validator"][style*="inline"],
span[id*="Required"][style*="inline"],
span[id*="Range"][style*="inline"],
span[style*="color:Red"][style*="inline"],
span[style*="color: Red"][style*="inline"],
span[style*="color:red"][style*="inline"],
span[style*="color: red"][style*="inline"] {
    display: inline !important;
    visibility: visible !important;
}

/* ================================================================
   2. BASE / PAGE LAYOUT OVERRIDES
   ================================================================ */

/* White page background — removes the old grey from bstyles.css */
body,
.master-wrapper-page,
.master-wrapper-content,
.master-wrapper-main {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    font-family: var(--lms-font) !important;
}

/* Full-width layout */
.master-wrapper-page    { width: 100% !important; overflow: visible !important; }
.master-wrapper-content { margin: 0 !important; padding: 0 10px !important; }

/* Page content padding */
div.account-Page { padding: 0 24px !important; }
div.account-Page .page-title { padding-top: 8px !important; }

/* White background on page body and tab panels */
div.account-Page,
div.account-Page div.page-body,
div.account-Page div.r-tabs-panel,
div#trainingtab .r-tabs-panel {
    background: #fff !important;
    text-align: left !important;
}

.page-body,
.master-wrapper-content,
.master-wrapper-main {
    text-align: left !important;
}

/* Header row height */
.header {
    min-height: 80px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.header-left-side  { display: flex !important; flex-direction: column !important; justify-content: center !important; }
.header-logo a     { height: 70px !important; }
.header-right-side { display: flex !important; align-items: center !important; }
.header-selectors-wrapper { padding-top: 0 !important; }
.header-selectors-inner   { display: flex !important; align-items: center !important; gap: 12px !important; }
.call { padding-top: 0 !important; }

/* Reset old grey nav overrides from bstyles.css — scoped to direct children only */
.header-menu .top-menu                  { background: #1f2937 !important; background-color: #1f2937 !important; }
.header-menu .top-menu > li:hover       { background: transparent !important; }
.header-menu .top-menu > li             { background: none !important; }
.header-menu .top-menu > li.selected    { background: transparent !important; }
.header-menu .top-menu > li > a.hover,
.header-menu .top-menu > li > a:focus   { background: rgba(255,255,255,.07) !important; }
.header-menu .top-menu > li > .sublist  { background: #fff !important; }
.header-menu .top-menu .sublist > li    { background: none !important; }
.header-menu .top-menu .sublist > li > a.hover,
.header-menu .top-menu .sublist > li > a:focus { background: #fdf6f0 !important; }

/* Clean up old button styles */
.header .ico_button,
.header-links .ico-button {
    background-color: transparent !important;
    border-radius: var(--lms-radius-sm) !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding: 5px 10px !important;
}

/* responsiveTabs anchor reset */
.r-tabs .r-tabs-nav .r-tabs-anchor,
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.hidden { visibility: hidden; }


/* ================================================================
   3. HEADER STRIP
   ================================================================ */

.lms-header {
    background: #fff;
    border-bottom: 1px solid var(--lms-grey-200);
}

.lms-header-strip {
    background: var(--lms-grey-50);
    border-bottom: 1px solid var(--lms-grey-200);
    padding: 5px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--lms-grey-500);
    min-height: 32px;
}
.lms-header-strip a {
    color: var(--lms-grey-500);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.lms-header-strip a:hover { color: var(--lms-orange); }
.lms-header-strip .lms-strip-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Acting-as banner */
.lms-acting-as {
    background: var(--lms-orange-light);
    color: var(--lms-orange-text);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
}
.lms-acting-as a {
    color: var(--lms-orange) !important;
    margin-left: 10px;
    text-decoration: underline !important;
}


/* ================================================================
   4. HEADER MAIN ROW
   ================================================================ */

.lms-header-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    gap: 16px !important;
    min-height: 64px !important;
}

.lms-header-logo {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.lms-header-logo a {
    display: block !important;
    min-width: 140px !important;
    min-height: 56px !important;
}

.lms-header-selectors {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: flex-end;
}
.lms-header-selectors .lms-phone {
    font-size: 13px;
    font-weight: 600;
    color: var(--lms-grey-700);
    white-space: nowrap;
}
.lms-header-selectors select {
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: var(--lms-radius-sm) !important;
    border: 1px solid var(--lms-grey-300) !important;
    background: #fff !important;
    color: var(--lms-grey-700) !important;
    cursor: pointer;
}

.lms-header-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.lms-header-links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}
.lms-header-links ul li { display: flex !important; align-items: center !important; }
.lms-header-links ul li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    border-radius: var(--lms-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--lms-grey-500) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .12s, color .12s !important;
    letter-spacing: .01em !important;
}
.lms-header-links ul li a:hover {
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-900) !important;
}
.lms-header-links .qty,
.lms-header-links span.qty {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    padding: 0 4px !important;
    margin-left: 3px !important;
    line-height: 1 !important;
}
.lms-header-links .ico-login,
.lms-header-links .ico-logout,
.lms-header-links .ico-register {
    background: var(--lms-grey-100) !important;
    border: 1px solid var(--lms-grey-200) !important;
}
.lms-header-links .ico-logout:hover {
    background: var(--lms-red-light) !important;
    color: var(--lms-red-text) !important;
}


/* ================================================================
   5. NAVIGATION BAR
   ================================================================ */

.header-menu {
    background: var(--lms-grey-800) !important;
    position: relative !important;
}

.header-menu .top-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: stretch !important;
    background: var(--lms-grey-800) !important;
    min-height: 52px !important;
    gap: 0 !important;
    border: none !important;
    float: none !important;
}

.header-menu .top-menu > li {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    float: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-menu .top-menu > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #d1d5db !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    transition: color .15s, border-color .15s, background .15s;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.header-menu .top-menu > li > a:hover,
.header-menu .top-menu > li > a.hover {
    color: #fff !important;
    background: rgba(255,255,255,.07) !important;
    border-bottom-color: var(--lms-orange) !important;
}

.header-menu .top-menu > li.selected,
.header-menu .top-menu > li[class*="selected"] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
}
.header-menu .top-menu > li.selected > a,
.header-menu .top-menu > li[class*="selected"] > a {
    color: var(--lms-orange) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--lms-orange) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

.header-menu .top-menu img          { display: none !important; }
.header-menu .top-menu-triangle     { display: none !important; }

/* Dropdown */
.header-menu .top-menu li .sublist {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 180px !important;
    width: max-content !important;
    max-width: 280px !important;
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: var(--lms-shadow-drop) !important;
    padding: 6px 0 !important;
    list-style: none !important;
    margin: 0 !important;
    z-index: 9999 !important;
    float: none !important;
    height: auto !important;
    overflow: visible !important;
}
.header-menu .top-menu li .sublist.active { display: block !important; }

.header-menu .top-menu li .sublist li {
    position: relative !important;
    float: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: auto !important;
}
.header-menu .top-menu li .sublist li a {
    display: flex !important;
    align-items: center !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    transition: background .12s, color .12s;
    width: 100% !important;
    box-sizing: border-box !important;
}
.header-menu .top-menu li .sublist li a:hover {
    background: #fdf6f0 !important;
    color: var(--lms-orange) !important;
}
.header-menu .top-menu li .sublist.secondLevel,
.header-menu .top-menu li .sublist.thirdLevel {
    top: 0 !important;
    left: 100% !important;
    border-radius: 0 10px 10px 10px !important;
}
.header-menu .top-menu li .sublist li:has(.sublist) > a::after {
    content: "\203A";
    font-size: 15px;
    margin-left: auto;
    padding-left: 10px;
    color: var(--lms-grey-400);
}

/* Online Users */
.header-menu a.onlineuser-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--lms-grey-400) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
    transition: color .15s;
}
.header-menu a.onlineuser-btn:hover { color: #fff !important; }
.header-menu a.onlineuser-btn[qty]::after {
    content: attr(qty);
    background: var(--lms-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* Mobile hamburger */
.header-menu #mob-menu-button {
    display: none;
    padding: 10px 16px;
    background: var(--lms-grey-800);
}
.header-menu #mob-menu-button a {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: #d1d5db; font-size: 13px; font-weight: 500;
}
.header-menu #mob-menu-button .icon { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.header-menu #mob-menu-button .line { display: block; height: 2px; background: #d1d5db; border-radius: 2px; transition: background .15s; }
.header-menu #mob-menu-button a:hover .line { background: var(--lms-orange); }
.header-menu .mob-top-menu { display: none; list-style: none; margin: 0; padding: 0; background: var(--lms-grey-900); }
.header-menu .mob-top-menu.show { display: block; }
.header-menu .mob-top-menu li a {
    display: block !important; padding: 12px 20px !important; font-size: 14px !important;
    color: #d1d5db !important; text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    background: transparent !important; transition: background .12s, color .12s;
}
.header-menu .mob-top-menu li a:hover { background: rgba(255,255,255,.07) !important; color: var(--lms-orange) !important; }


/* ================================================================
   6. TAB BARS  (#trainingtab — MyCourses, #horizontalTab — CoursePage)
   ================================================================ */

/* Shared rules applied to both tab containers */
div#trainingtab,
div#trainingtab.r-tabs,
div#horizontalTab,
div#horizontalTab.r-tabs {
    background: transparent !important;
    border: none !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Grey background only on the tab strip ul */
div#trainingtab ul.r-tabs-nav,
div#trainingtab > ul,
div#horizontalTab ul.r-tabs-nav,
div#horizontalTab > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    background: var(--lms-grey-100) !important;
    border-top: 1px solid var(--lms-grey-200) !important;
    border-bottom: 3px solid var(--lms-grey-200) !important;
    box-shadow: none !important;
}

/* Each tab item */
div#trainingtab ul.r-tabs-nav li,
div#trainingtab > ul > li,
div#horizontalTab ul.r-tabs-nav li,
div#horizontalTab > ul > li {
    list-style: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Tab anchor */
div#trainingtab ul.r-tabs-nav li a,
div#trainingtab > ul > li a,
div#horizontalTab ul.r-tabs-nav li a,
div#horizontalTab > ul > li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: color .15s, border-color .15s, background .15s !important;
    line-height: 1 !important;
    margin: 0 !important;
}
/* Hide the old icon images inside tab links */
div#horizontalTab ul.r-tabs-nav li a img,
div#horizontalTab > ul > li a img { display: none !important; }

div#trainingtab ul.r-tabs-nav li a:hover,
div#trainingtab > ul > li a:hover,
div#horizontalTab ul.r-tabs-nav li a:hover,
div#horizontalTab > ul > li a:hover {
    color: var(--lms-grey-800) !important;
    border-bottom-color: var(--lms-grey-400) !important;
    background: rgba(0,0,0,.04) !important;
}

/* Active tab */
div#trainingtab ul.r-tabs-nav li.r-tabs-state-active a,
div#trainingtab > ul > li.r-tabs-state-active a,
div#horizontalTab ul.r-tabs-nav li.r-tabs-state-active a,
div#horizontalTab > ul > li.r-tabs-state-active a {
    color: var(--lms-orange) !important;
    border-bottom-color: var(--lms-orange) !important;
    font-weight: 600 !important;
    background: #fff !important;
}

/* Accordion (mobile) */
div#trainingtab .r-tabs-accordion-title,
div#horizontalTab .r-tabs-accordion-title {
    border: none !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
    background: var(--lms-grey-100) !important;
}
div#trainingtab .r-tabs-accordion-title a,
div#horizontalTab .r-tabs-accordion-title a {
    display: block !important; padding: 12px 16px !important;
    font-size: 13px !important; font-weight: 500 !important;
    color: var(--lms-grey-700) !important; text-decoration: none !important;
}
div#trainingtab .r-tabs-accordion-title.r-tabs-state-active,
div#horizontalTab .r-tabs-accordion-title.r-tabs-state-active {
    border-left: 3px solid var(--lms-orange) !important;
    background: #fff !important;
}
div#trainingtab .r-tabs-accordion-title.r-tabs-state-active a,
div#horizontalTab .r-tabs-accordion-title.r-tabs-state-active a { color: var(--lms-orange) !important; }

div#trainingtab .r-tabs-panel,
div#horizontalTab .r-tabs-panel { padding: 0 !important; border: none !important; background: transparent !important; }


/* ================================================================
   7. COURSE GRID  (.mcg-*)
   ================================================================ */

.mcg-wrap { padding: 0 0 1.5rem; position: relative !important; }

/* Filter bar */
.mcg-filter-bar {
    display: flex !important; align-items: center !important;
    justify-content: flex-end !important; gap: 8px !important;
    margin-bottom: 20px !important; float: none !important;
}
.mcg-filter-bar .mcg-filter-label { font-size: 13px; color: var(--lms-grey-500); white-space: nowrap; }
.mcg-filter-bar select {
    font-size: 13px !important; padding: 6px 10px !important;
    border-radius: var(--lms-radius-md) !important; border: 1px solid var(--lms-grey-300) !important;
    background: #fff !important; color: var(--lms-grey-700) !important; min-width: 180px; cursor: pointer;
}

/* Section headings */
.mcg-section-title {
    font-size: 12px !important; font-weight: 600 !important; letter-spacing: .06em !important;
    text-transform: uppercase !important; color: var(--lms-grey-500) !important;
    margin: 0 0 12px !important; padding-bottom: 8px !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
}

/* Grid */
.mcg-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important; margin-bottom: 28px !important;
    list-style: none !important; padding: 0 !important; margin-left: 0 !important; float: none !important;
}
@media (max-width: 900px) { .mcg-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .mcg-grid { grid-template-columns: 1fr !important; } }

/* Card shell */
.mcg-card {
    background: #fff !important; border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
    position: relative !important; transition: border-color .15s, box-shadow .15s;
    float: none !important; width: auto !important;
}
.mcg-card:hover { border-color: var(--lms-grey-300) !important; box-shadow: var(--lms-shadow-card) !important; }

/* Status accent bar */
.mcg-card::before {
    content: '' !important; position: absolute !important;
    left: 0; top: 0; bottom: 0; width: 3px !important; background: var(--lms-grey-300);
}
.mcg-card:has(label[style*="orange"])::before { background: var(--lms-orange) !important; }
.mcg-card:has(label[style*="green"])::before  { background: var(--lms-green) !important; }
.mcg-card:has(label[style*="blue"])::before   { background: var(--lms-grey-400) !important; }
.mcg-card:has(label[style*="red"])::before    { background: var(--lms-red) !important; }

/* Card top */
.mcg-card-top { display: flex !important; gap: 14px !important; padding: 16px 16px 10px 18px !important; }

/* Thumbnail */
.mcg-card-top .picture {
    flex-shrink: 0 !important; width: 64px !important; height: 64px !important; min-width: 64px !important;
    border-radius: var(--lms-radius-md) !important; overflow: hidden !important;
    border: 1px solid var(--lms-grey-200) !important; background: var(--lms-grey-100) !important;
    display: block !important; float: none !important; margin: 0 !important;
}
.mcg-card-top .picture img {
    width: 64px !important; height: 64px !important; object-fit: cover !important;
    display: block !important; border: none !important; border-radius: 0 !important;
    float: none !important; margin: 0 !important; max-width: none !important;
}

/* Card body */
.mcg-card-body { flex: 1 !important; min-width: 0 !important; }

.mcg-card-body .product-title {
    font-size: 13px !important; font-weight: 600 !important; color: #111827 !important;
    margin: 0 0 4px !important; line-height: 1.35 !important;
    text-transform: none !important; letter-spacing: normal !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.mcg-card-body .description { font-size: 12px !important; color: var(--lms-grey-500) !important; line-height: 1.45 !important; margin: 0 !important; }

/* Description clamp */
.mcg-desc-wrap {
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important; font-size: 12px !important; color: var(--lms-grey-500) !important;
    line-height: 1.45 !important; margin-bottom: 2px !important; width: 100% !important;
}
.mcg-desc-wrap.mcg-overflows { cursor: pointer !important; }
.mcg-desc-wrap.mcg-overflows:hover { color: var(--lms-grey-700) !important; }
.mcg-desc-more { display: none !important; }

/* Status wrapper */
.mcg-card-body .mcg-status-wrap {
    font-size: 0 !important; display: block !important; margin-top: 6px !important; line-height: 1 !important;
}

/* Status pills */
.mcg-card-body label[style*="orange"],
.mcg-card-body label[style*="green"],
.mcg-card-body label[style*="blue"],
.mcg-card-body label[style*="red"] {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    padding: 2px 9px !important; border-radius: var(--lms-radius-pill) !important;
    font-size: 11px !important; font-weight: 600 !important; line-height: 1.6 !important;
}
.mcg-card-body label[style*="orange"] { background: var(--lms-orange-light) !important; color: var(--lms-orange-text) !important; }
.mcg-card-body label[style*="green"]  { background: var(--lms-green-light) !important;  color: var(--lms-green-text) !important;  }
.mcg-card-body label[style*="blue"]   { background: var(--lms-grey-100) !important;     color: var(--lms-grey-500) !important;     }
.mcg-card-body label[style*="red"]    { background: var(--lms-red-light) !important;    color: var(--lms-red-text) !important;     }
.mcg-card-body .description label[style*="display"] { font-size: 12px !important; color: var(--lms-grey-500) !important; }

/* Meta lines */
.mcg-card-meta { padding: 2px 16px 0 18px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.mcg-card-meta .meta-line { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 11.5px !important; color: var(--lms-grey-400) !important; }
.mcg-card-meta .meta-line strong { color: var(--lms-grey-700) !important; font-weight: 500 !important; }

/* Expiry */
.mcg-expiry { font-size: 11.5px !important; color: var(--lms-red-text) !important; padding: 0 16px 0 18px !important; margin-top: 4px !important; }

/* Card footer */
.mcg-card-footer {
    margin-top: auto !important; padding: 12px 14px 14px !important;
    display: flex !important; justify-content: flex-end !important; gap: 6px !important;
    border-top: 1px solid var(--lms-grey-100) !important;
}
.mcg-card .add-info, .mcg-card .prices { display: none !important; }
.mcg-card .buttons { display: contents !important; }
.mcg-card ul.buttongroup-50 { display: contents !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* Card buttons */
.mcg-card input[type=button],
.mcg-card input[type=submit],
.mcg-card .button-2 {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 7px 14px !important; border-radius: 7px !important; font-size: 12px !important;
    font-weight: 600 !important; font-family: inherit !important; letter-spacing: .01em !important;
    white-space: nowrap !important; cursor: pointer !important; border: none !important;
    transition: background .15s, box-shadow .15s, transform .1s;
    background: var(--lms-orange) !important; color: #fff !important;
    box-shadow: 0 1px 2px rgba(240,145,58,.25) !important;
}
.mcg-card input[type=button]:hover,
.mcg-card input[type=submit]:hover,
.mcg-card .button-2:hover {
    background: var(--lms-orange-dark) !important;
    box-shadow: 0 3px 8px rgba(240,145,58,.35) !important;
    transform: translateY(-1px);
}
.mcg-card input[type=button]:active,
.mcg-card input[type=submit]:active { transform: scale(0.97) !important; box-shadow: none !important; }

.mcg-card input[value*="Review"],
.mcg-card input[value*="review"],
.mcg-card input[value*="Réviser"] {
    background: var(--lms-grey-100) !important; color: var(--lms-grey-700) !important;
    border: 1px solid var(--lms-grey-200) !important; box-shadow: none !important;
}
.mcg-card input[value*="Review"]:hover,
.mcg-card input[value*="review"]:hover {
    background: var(--lms-grey-200) !important; color: var(--lms-grey-900) !important;
}

/* Empty state */
.mcg-empty {
    text-align: center !important; padding: 40px 20px !important;
    color: var(--lms-grey-400) !important; font-size: 14px !important;
    border: 1px dashed var(--lms-grey-300) !important; border-radius: var(--lms-radius-lg) !important;
}


/* ================================================================
   8. DESCRIPTION MODAL
   ================================================================ */

.mcg-modal-backdrop {
    display: none;
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; min-height: 100% !important;
    background: rgba(0,0,0,.45) !important; z-index: 9999 !important;
    align-items: flex-start !important; justify-content: center !important; padding-top: 60px !important;
}
.mcg-modal-backdrop.mcg-modal-open { display: flex !important; }
.mcg-modal {
    background: #fff !important; border-radius: var(--lms-radius-xl) !important;
    width: 100% !important; max-width: 480px !important; margin: 0 20px 40px !important;
    box-shadow: var(--lms-shadow-modal) !important; overflow: hidden !important;
}
.mcg-modal-header {
    display: flex !important; align-items: flex-start !important;
    justify-content: space-between !important; gap: 12px !important;
    padding: 18px 20px 14px !important; border-bottom: 1px solid var(--lms-grey-100) !important;
}
.mcg-modal-title { font-size: 14px !important; font-weight: 600 !important; color: #111827 !important; margin: 0 !important; line-height: 1.4 !important; }
.mcg-modal-close {
    flex-shrink: 0 !important; width: 28px !important; height: 28px !important;
    border-radius: var(--lms-radius-sm) !important; border: 1px solid var(--lms-grey-200) !important;
    background: var(--lms-grey-50) !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 15px !important; color: var(--lms-grey-500) !important; line-height: 1 !important; transition: background .12s !important;
}
.mcg-modal-close:hover { background: var(--lms-grey-100) !important; color: var(--lms-grey-900) !important; }
.mcg-modal-body { padding: 16px 20px 20px !important; font-size: 13px !important; color: var(--lms-grey-700) !important; line-height: 1.65 !important; }


/* ================================================================
   9. SEQUENCE CARDS  (.seq-*)
   ================================================================ */

.seq-card {
    display: flex; align-items: center; gap: 18px;
    padding: 18px 20px 18px 24px; background: #fff;
    border: 1px solid var(--lms-grey-200); border-radius: var(--lms-radius-lg);
    margin-bottom: 8px; position: relative; overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}
.seq-card:hover { border-color: var(--lms-grey-300); box-shadow: var(--lms-shadow-card); }
.seq-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; border-radius: var(--lms-radius-lg) 0 0 var(--lms-radius-lg); background: var(--lms-grey-300);
}
.seq-card:has(.sequence-inprogress)::before { background: var(--lms-orange); }
.seq-card:has(.sequence-completed)::before  { background: var(--lms-green); }
.seq-card:has(.sequence-passed)::before     { background: var(--lms-green); }
.seq-card:has(.sequence-failed)::before     { background: var(--lms-red); }

.seq-badge-wrap {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px;
    background: var(--lms-grey-100); overflow: hidden;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.seq-badge-wrap [class*="sequence-image"],
.seq-badge-wrap .sequence-image { display: contents; }
.seq-badge-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.seq-badge-wrap .overlayImage { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; }
.seq-badge-wrap .overlayImage img { width: 20px; height: 20px; border-radius: 50%; }

.seq-body { flex: 1; min-width: 0; }
.seq-title { font-size: 15px; font-weight: 600; color: #111827; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-title a { color: inherit; text-decoration: none; }
.seq-title a:hover { color: var(--lms-orange); }
.seq-desc { font-size: 13px; color: var(--lms-grey-500); margin: 0 0 8px; line-height: 1.45; }

.seq-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.seq-meta [id^="SequenceStatusOnly_"],
.seq-meta .sequence-status { display: inline-flex !important; align-items: center; }
.seq-meta [id^="SequenceStatusOnly_"] span,
.seq-meta .sequence-status span { display: inline-flex; align-items: center; gap: 6px; font-size: 0; }
.seq-meta [id^="SequenceStatusOnly_"] label,
.seq-meta .sequence-status label {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--lms-radius-pill);
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.4;
}
.seq-meta label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .65; flex-shrink: 0; }
.seq-meta .sequence-notstarted { background: var(--lms-grey-100); color: var(--lms-grey-500); }
.seq-meta .sequence-inprogress { background: var(--lms-orange-light); color: var(--lms-orange-text); }
.seq-meta .sequence-completed  { background: var(--lms-green-light); color: var(--lms-green-text); }
.seq-meta .sequence-passed     { background: var(--lms-green-light); color: var(--lms-green-text); }
.seq-meta .sequence-failed     { background: var(--lms-red-light); color: var(--lms-red-text); }
.seq-meta [id^="SequenceDetails_"],
.seq-meta [id^="SequenceProgress_"],
.seq-meta .sequence-details,
.seq-meta .sequence-progress { display: inline-flex !important; align-items: center; font-size: 12px; color: var(--lms-grey-400); }

.seq-comments { font-size: 12px; color: var(--lms-grey-500); font-style: italic; margin-top: 5px; }

.seq-actions { flex-shrink: 0; display: flex; align-items: center; }
.seq-actions ul.buttongroup-50 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* Sequence buttons */
.sequence-button a,
.SequenceAssignmentBegin a, .SequenceAssignmentBegin input[type=submit], .SequenceAssignmentBegin input[type=button],
.SequenceAssignmentSubmit a, .SequenceAssignmentSubmit input[type=submit], .SequenceAssignmentSubmit input[type=button],
.SequenceAssignmentUpload a, .SequenceAssignmentUpload input[type=submit], .SequenceAssignmentUpload input[type=button],
.SequenceAssignmentGrade a, .SequenceAssignmentGrade input[type=submit], .SequenceAssignmentGrade input[type=button] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px; border-radius: 7px; font-size: 12px; font-weight: 600;
    font-family: inherit; letter-spacing: .01em; white-space: nowrap; cursor: pointer;
    text-decoration: none; border: none; outline: none;
    transition: background .15s, box-shadow .15s, transform .12s;
}
.sequence-button a,
.SequenceAssignmentBegin a, .SequenceAssignmentBegin input[type=submit], .SequenceAssignmentBegin input[type=button],
.SequenceAssignmentSubmit a, .SequenceAssignmentSubmit input[type=submit], .SequenceAssignmentSubmit input[type=button],
.SequenceAssignmentUpload a, .SequenceAssignmentUpload input[type=submit], .SequenceAssignmentUpload input[type=button] {
    background: var(--lms-orange); color: #fff !important;
    box-shadow: 0 1px 2px rgba(240,145,58,.3), inset 0 1px 0 rgba(255,255,255,.14);
}
.sequence-button a:hover,
.SequenceAssignmentBegin a:hover, .SequenceAssignmentBegin input:hover,
.SequenceAssignmentSubmit a:hover, .SequenceAssignmentSubmit input:hover,
.SequenceAssignmentUpload a:hover, .SequenceAssignmentUpload input:hover {
    background: var(--lms-orange-dark) !important; color: #fff !important;
    box-shadow: 0 3px 8px rgba(240,145,58,.4), inset 0 1px 0 rgba(255,255,255,.14);
    transform: translateY(-1px); text-decoration: none;
}
.SequenceAssignmentGrade a, .SequenceAssignmentGrade input[type=submit], .SequenceAssignmentGrade input[type=button] {
    background: var(--lms-grey-100); color: var(--lms-grey-700) !important;
    border: 1px solid var(--lms-grey-300); box-shadow: none;
}
.SequenceAssignmentGrade a:hover, .SequenceAssignmentGrade input:hover {
    background: var(--lms-grey-200); color: var(--lms-grey-900) !important; transform: translateY(-1px);
}
.sequence-button { display: inline-flex !important; }
.sequence-blocked { opacity: .45; pointer-events: none; }
.seq-actions .sequence-noaccess,
.seq-actions [class*="sequence-noaccess"] { font-size: 12px; color: var(--lms-grey-400); padding: 4px 2px; display: block; }


/* ================================================================
   12. CUSTOMER CERTIFICATES  (.cert-*)
   ================================================================ */

/* Filter bar */
.cert-filter-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}
.cert-filter-label {
    font-size: 13px !important;
    color: var(--lms-grey-500) !important;
    white-space: nowrap !important;
}
.cert-filter-select {
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: var(--lms-radius-md) !important;
    border: 1px solid var(--lms-grey-300) !important;
    background: #fff !important;
    color: var(--lms-grey-700) !important;
    min-width: 180px !important;
    cursor: pointer !important;
}
.cert-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 16px !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .15s !important;
}
.cert-filter-btn:hover { background: var(--lms-orange-dark) !important; }

/* Grid — 3 columns matching course grid */
.cert-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .cert-grid { grid-template-columns: 1fr !important; } }

/* Card */
.cert-card {
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: border-color .15s, box-shadow .15s;
}
.cert-card:hover {
    border-color: var(--lms-grey-300) !important;
    box-shadow: var(--lms-shadow-card) !important;
}
/* Orange left accent */
.cert-card::before {
    content: '' !important;
    position: absolute !important;
    left: 0; top: 0; bottom: 0;
    width: 3px !important;
    background: var(--lms-orange) !important;
}

/* Top row — thumbnail + title/meta side by side */
.cert-card-top {
    display: flex !important;
    gap: 14px !important;
    padding: 16px 16px 10px 18px !important;
    align-items: flex-start !important;
}

/* Thumbnail — small square matching mcg-card */
.cert-thumb {
    flex-shrink: 0 !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: var(--lms-radius-md) !important;
    overflow: hidden !important;
    border: 1px solid var(--lms-grey-200) !important;
    background: var(--lms-grey-100) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cert-thumb img,
.cert-thumb a,
.cert-thumb a img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
}

/* Body */
.cert-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.cert-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cert-desc {
    font-size: 12px !important;
    color: var(--lms-grey-500) !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Meta rows */
.cert-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
.cert-meta-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    font-size: 11.5px !important;
}
.cert-meta-label {
    color: var(--lms-grey-500) !important;
    flex-shrink: 0 !important;
    font-weight: 500 !important;
    min-width: 80px !important;
}
.cert-meta-label::after {
    content: ':' !important;
}
/* Hide the row entirely when the label's inner control renders no text (Visible=false) */
.cert-meta-row:has(> .cert-meta-label:empty),
.cert-meta-row:has(> .cert-meta-label > span:empty) {
    display: none !important;
}
.cert-meta-value {
    color: var(--lms-grey-700) !important;
    font-weight: 400 !important;
}

/* Version dropdown */
.cert-version-select {
    font-size: 12px !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    border: 1px solid var(--lms-grey-300) !important;
    background: #fff !important;
    color: var(--lms-grey-700) !important;
}

/* Actions footer */
.cert-actions {
    padding: 10px 14px 14px !important;
    border-top: 1px solid var(--lms-grey-100) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}
.cert-actions .buttons { display: contents !important; }
.cert-actions ul.buttongroup-50 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-end !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Certificate download/view buttons */
.cert-actions ul.buttongroup-50 a,
.cert-actions ul.buttongroup-50 input[type=button],
.cert-actions ul.buttongroup-50 input[type=submit],
.cert-actions ul.buttongroup-50 button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 14px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    border: none !important;
    transition: background .15s, box-shadow .15s, transform .1s;
    background: var(--lms-orange) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(240,145,58,.25) !important;
}
.cert-actions ul.buttongroup-50 a:hover,
.cert-actions ul.buttongroup-50 input[type=button]:hover,
.cert-actions ul.buttongroup-50 input[type=submit]:hover,
.cert-actions ul.buttongroup-50 button:hover {
    background: var(--lms-orange-dark) !important;
    box-shadow: 0 3px 8px rgba(240,145,58,.35) !important;
    transform: translateY(-1px);
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Certificate generate button — hide while confirm iframe is open ── */
.cert-actions ul.buttongroup-50 input.cert-generating {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
.cert-actions ul.buttongroup-50 li:nth-child(2) a:hover,
.cert-actions ul.buttongroup-50 li:nth-child(2) input:hover {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
}


/* ================================================================
   14. VIDEO PAGINATION  (.vid-*)
   ================================================================ */

.vid-pagination,
.vid-pagination.pagerStyle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px 0 4px !important;
    border-top: 1px solid var(--lms-grey-200) !important;
    margin-top: 8px !important;
    /* Reset theme pagerStyle floats */
    overflow: hidden !important;
}
.vid-pagination .floatLeft,
.vid-pagination .floatRight {
    float: none !important;
    margin: 0 !important;
}

.vid-page-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}

a.vid-page-btn,
.vid-page-btn,
a.vid-page-btn:link,
a.vid-page-btn:visited,
.vid-page-nav a,
.vid-page-nav a:link,
.vid-page-nav a:visited {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--lms-font) !important;
    color: var(--lms-grey-700) !important;
    background: var(--lms-grey-100) !important;
    border: 1px solid var(--lms-grey-200) !important;
    text-decoration: none !important;
    transition: background .12s, color .12s !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    height: auto !important;
}
.vid-page-nav a:hover {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
    text-decoration: none !important;
}
a.vid-page-btn:hover,
.vid-page-btn:hover {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
    text-decoration: none !important;
}

.vid-page-controls {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.vid-page-control {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: var(--lms-grey-500) !important;
}

.vid-page-control label {
    font-size: 12px !important;
    color: var(--lms-grey-500) !important;
    white-space: nowrap !important;
    font-weight: normal !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    line-height: normal !important;
    padding-right: 0 !important;
}

/* Go button — must not inherit .customer-info-page height:25px from bstyles */
.vid-page-btn.vid-page-btn-go,
input.vid-page-btn.vid-page-btn-go {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
}

.vid-page-input {
    font-size: 12px !important;
    padding: 5px 8px !important;
    border-radius: var(--lms-radius-sm) !important;
    border: 1px solid var(--lms-grey-300) !important;
    color: var(--lms-grey-700) !important;
    background: #fff !important;
}

.vid-page-input-sm {
    font-size: 12px !important;
    padding: 5px 6px !important;
    border-radius: var(--lms-radius-sm) !important;
    border: 1px solid var(--lms-grey-300) !important;
    color: var(--lms-grey-700) !important;
    background: #fff !important;
    width: 44px !important;
    text-align: center !important;
}

.vid-page-btn-go {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
}
.vid-page-btn-go:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}

/* Code-behind sets CssClass="disabled" when button not applicable — hide it */
.vid-page-nav a.disabled,
.vid-page-nav span.disabled {
    display: none !important;
}
/* Hide the nav row entirely when all four buttons are disabled */
.vid-page-nav:not(:has(a:not(.disabled))) {
    display: none !important;
}


/* ================================================================
   16. COURSE DOCUMENTS  (.doc-*)
   ================================================================ */

/* Upload button */
.doc-upload-bar {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 0 14px !important;
}
.doc-upload-bar .button-1,
.doc-upload-bar input.button-1 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .15s !important;
}
.doc-upload-bar .button-1:hover,
.doc-upload-bar input.button-1:hover { background: var(--lms-orange-dark) !important; }

/* Upload form panel */
.doc-upload-form {
    background: var(--lms-grey-50) !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}
.doc-upload-form .fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.doc-upload-form .title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--lms-grey-700) !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
}
.doc-upload-form .inputs {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}
.doc-upload-form .inputs label {
    font-size: 13px !important;
    color: var(--lms-grey-500) !important;
    min-width: 90px !important;
    padding-top: 6px !important;
    font-weight: 500 !important;
}
.doc-upload-form .inputs input[type=text],
.doc-upload-form .inputs textarea {
    flex: 1 !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: var(--lms-radius-sm) !important;
    border: 1px solid var(--lms-grey-300) !important;
    background: #fff !important;
    color: var(--lms-grey-700) !important;
}
.doc-upload-form .doc-form-footer {
    display: flex !important;
    justify-content: flex-end !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--lms-grey-200) !important;
    margin-top: 10px !important;
}
.doc-upload-form .button-1 {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 14px !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    border: 1px solid var(--lms-grey-200) !important;
    cursor: pointer !important;
    transition: background .15s !important;
}
.doc-upload-form .button-1:hover { background: var(--lms-grey-200) !important; }

/* Document grid */
.doc-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

/* Document card */
.doc-card {
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color .15s, box-shadow .15s;
}
.doc-card:hover {
    border-color: var(--lms-grey-300) !important;
    box-shadow: var(--lms-shadow-card) !important;
}
.doc-card::before {
    content: '' !important;
    position: absolute !important;
    left: 0; top: 0; bottom: 0;
    width: 3px !important;
    background: var(--lms-orange) !important;
}

/* Card body */
.doc-card-body {
    padding: 14px 16px 10px 18px !important;
    flex: 1 !important;
}

/* Document title link */
.doc-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.doc-title a {
    color: inherit !important;
    text-decoration: none !important;
}
.doc-title a:hover { color: var(--lms-orange) !important; }

/* Description */
.doc-description {
    font-size: 12px !important;
    color: var(--lms-grey-500) !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Document type badge */
.doc-type-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: var(--lms-radius-pill) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-500) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

/* Card footer */
.doc-card-footer {
    padding: 10px 14px 12px !important;
    border-top: 1px solid var(--lms-grey-100) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Open/download button */
.doc-card-footer a,
.doc-card-footer input[type=button] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    border: none !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    transition: background .15s, transform .1s !important;
    box-shadow: 0 1px 2px rgba(240,145,58,.25) !important;
}
.doc-card-footer a:hover,
.doc-card-footer input[type=button]:hover {
    background: var(--lms-orange-dark) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Remove button */
.doc-remove-btn {
    background: transparent !important;
    border: 1px solid var(--lms-grey-200) !important;
    color: var(--lms-grey-400) !important;
    padding: 6px 10px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    cursor: pointer !important;
    transition: background .12s, color .12s !important;
    box-shadow: none !important;
}
.doc-remove-btn:hover {
    background: var(--lms-red-light) !important;
    color: var(--lms-red-text) !important;
    border-color: var(--lms-red) !important;
    transform: none !important;
}

/* Empty state */
.doc-empty {
    text-align: center !important;
    padding: 30px 20px !important;
    color: var(--lms-grey-400) !important;
    font-size: 13px !important;
    border: 1px dashed var(--lms-grey-300) !important;
    border-radius: var(--lms-radius-lg) !important;
}

/* Link card — teal left accent to distinguish from documents */
.doc-link-card::before { background: #0d9488 !important; }
.doc-type-link { background: #f0fdfa !important; color: #0d9488 !important; }

/* Save/Add button in doc form footer */
.doc-upload-form .button-1.doc-save-btn {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    margin-left: 6px !important;
}
.doc-upload-form .button-1.doc-save-btn:hover { background: var(--lms-orange-dark) !important; }

/* Pagination — reuse vid-* styles */
.doc-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px 0 4px !important;
    border-top: 1px solid var(--lms-grey-200) !important;
    margin-top: 8px !important;
}
.doc-page-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.doc-page-nav a.disabled,
.doc-page-nav span.disabled { display: none !important; }
.doc-page-nav:not(:has(a:not(.disabled))) { display: none !important; }


/* ================================================================
   18. CUSTOMERS GRID  (.cust-*)
   ================================================================ */

/* Container */
#usersgridcontainer {
    width: 100%;
    overflow-x: auto;
}

/* Table */
#UsersGrid {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
}

/* Column widths via classes (replaces inline style="width:…") */
#UsersGrid .col-select { width: 30px  !important; text-align: center !important; }
#UsersGrid .col-sm     { width: 70px  !important; }
#UsersGrid .col-md     { width: 80px  !important; }
#UsersGrid .col-action { width: 100px !important; text-align: center !important; }

/* Header cells */
#UsersGrid thead th {
    background:      var(--lms-grey-100) !important;
    border:          1px solid var(--lms-grey-200) !important;
    padding:         8px 12px !important;
    text-align:      left !important;
    white-space:     nowrap !important;
    cursor:          pointer !important;
    user-select:     none !important;
    font-size:       12px !important;
    font-weight:     600 !important;
    letter-spacing:  .04em !important;
    text-transform:  uppercase !important;
    color:           var(--lms-grey-500) !important;
}
#UsersGrid thead th.no-sort          { cursor: default !important; }
#UsersGrid thead th.sort-asc::after  { content: " ▲" !important; font-size: 9px !important; color: var(--lms-orange) !important; }
#UsersGrid thead th.sort-desc::after { content: " ▼" !important; font-size: 9px !important; color: var(--lms-orange) !important; }

/* Body rows */
#UsersGrid tbody tr:nth-child(even) { background: var(--lms-grey-50) !important; }
#UsersGrid tbody tr:hover           { background: var(--lms-orange-light) !important; cursor: pointer !important; }
#UsersGrid tbody tr.selected-row    {
    background:     var(--lms-orange-light) !important;
    outline:        1px solid var(--lms-orange) !important;
    outline-offset: -1px !important;
}

/* Body cells */
#UsersGrid td {
    border:          1px solid var(--lms-grey-200) !important;
    padding:         7px 12px !important;
    vertical-align:  middle !important;
    color:           var(--lms-grey-700) !important;
    font-size:       13px !important;
}
#UsersGrid td.col-bool {
    text-align: center !important;
    color:      var(--lms-green) !important;
    font-size:  14px !important;
}
#UsersGrid td.col-select { text-align: center !important; }
#UsersGrid td.col-action { text-align: center !important; }
#UsersGrid td.col-empty  {
    text-align: center !important;
    padding:    24px !important;
    color:      var(--lms-grey-400) !important;
}

/* Action links inside cells */
#UsersGrid td a.cust-action,
#GroupsGrid td a.cust-action,
#ProductsGrid td a.cust-action,
#ProductsGrid .col-action a {
    display:         inline-flex !important;
    align-items:     center !important;
    padding:         5px 10px !important;
    border-radius:   var(--lms-radius-sm) !important;
    font-size:       12px !important;
    font-weight:     600 !important;
    text-decoration: none !important;
    white-space:     nowrap !important;
    border:          1px solid var(--lms-grey-200) !important;
    background:      var(--lms-grey-100) !important;
    color:           var(--lms-grey-700) !important;
    transition:      background .15s, color .15s, border-color .15s !important;
}
#UsersGrid td a.cust-action:hover,
#GroupsGrid td a.cust-action:hover,
#ProductsGrid td a.cust-action:hover,
#ProductsGrid .col-action a:hover {
    background:      var(--lms-orange) !important;
    color:           #fff !important;
    border-color:    var(--lms-orange) !important;
    text-decoration: none !important;
}

/* Name column link */
#UsersGrid td a.cust-name-link {
    color: var(--lms-grey-700) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
#UsersGrid td a.cust-name-link:hover {
    color: var(--lms-orange) !important;
    text-decoration: underline !important;
}

/* Search bar */
#custSearchBar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    text-align: left !important;
    width: 100% !important;
}
#custSearchBar label {
    font-size: 13px !important;
    color: var(--lms-grey-500) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-align: left !important;
}
#custSearchBar input[type=text] {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: var(--lms-radius-md);
    border: 1px solid var(--lms-grey-300);
    background: #fff;
    color: var(--lms-grey-700);
    width: 280px;
    transition: border-color .15s, box-shadow .15s;
}
#custSearchBar input[type=text]:focus {
    outline: none;
    border-color: var(--lms-orange);
    box-shadow: 0 0 0 3px var(--lms-orange-light);
}

/* Buttons */
.cust-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    border: 1px solid var(--lms-grey-200) !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    transition: background .15s, color .15s !important;
    line-height: 1 !important;
}
.cust-btn:hover:not(:disabled) {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
}
.cust-btn:disabled {
    opacity: .38 !important;
    cursor: default !important;
}
.cust-btn-primary {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 1px 2px rgba(240,145,58,.25) !important;
}
.cust-btn-primary:hover:not(:disabled) {
    background: var(--lms-orange-dark) !important;
    color: #fff !important;
    border-color: var(--lms-orange-dark) !important;
}

/* Loading indicator */
.cust-loading {
    display: none;
    padding: 6px 14px;
    background: var(--lms-orange-light);
    border: 1px solid var(--lms-orange);
    border-radius: var(--lms-radius-md);
    color: var(--lms-orange-text);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Pager */
#UsersGridPager,
#GroupsGridPager,
#ProductsGridPager {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--lms-grey-200) !important;
    font-size: 13px !important;
    color: var(--lms-grey-500) !important;
    flex-wrap: wrap !important;
}
/* Nav group: «  ‹  Page X of Y  ›  » */
.cust-pager-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}
.cust-pager-info {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    color: var(--lms-grey-600) !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
}
/* Rows group */
.cust-pager-rows {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    font-size: 13px !important;
    color: var(--lms-grey-500) !important;
}
/* Icon-style nav buttons */
#UsersGridPager .cust-btn,
#GroupsGridPager .cust-btn,
#ProductsGridPager .cust-btn {
    padding: 5px 7px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--lms-grey-600) !important;
    min-width: 30px !important;
}
#UsersGridPager .cust-btn:disabled,
#GroupsGridPager .cust-btn:disabled,
#ProductsGridPager .cust-btn:disabled {
    opacity: .3 !important;
    cursor: default !important;
}
#UsersGridPager .cust-btn svg,
#GroupsGridPager .cust-btn svg,
#ProductsGridPager .cust-btn svg {
    display: block !important;
    pointer-events: none !important;
}
#pageInput {
    width: 36px !important;
    text-align: center !important;
    padding: 4px 4px !important;
    font-size: 13px !important;
    border-radius: var(--lms-radius-sm) !important;
    border: 1px solid var(--lms-grey-300) !important;
    background: var(--lms-grey-50) !important;
    color: var(--lms-grey-700) !important;
}
#pageSizeSelect {
    padding: 5px 8px !important;
    font-size: 13px !important;
    border-radius: var(--lms-radius-sm) !important;
    border: 1px solid var(--lms-grey-300) !important;
    background: #fff !important;
    color: var(--lms-grey-700) !important;
    cursor: pointer !important;
}
#pagerInfo {
    font-size: 12px !important;
    color: var(--lms-grey-400) !important;
    white-space: nowrap !important;
}





/* ================================================================
   CUSTOMER NOTES  (.cust-notes-*)
   ================================================================ */

/* Add-note form-fields — column layout with textarea + button */
.customer-info-page #pnlAddNote .form-fields {
    padding: 14px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ButtonBlue inside pnlAddNote must NOT stretch full width */
.customer-info-page #pnlAddNote .form-fields .ButtonBlue,
.customer-info-page #pnlAddNote .form-fields input.ButtonBlue {
    width: auto !important;
    align-self: flex-start !important;
}

.cust-notes-textarea,
textarea.cust-notes-textarea {
    width: 100% !important;
    max-width: 600px !important;
    min-height: 80px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: var(--lms-radius-md) !important;
    border: 1px solid var(--lms-grey-300) !important;
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    color: var(--lms-grey-700) !important;
    background: #fff !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}
.cust-notes-textarea:focus,
textarea.cust-notes-textarea:focus {
    outline: none !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 0 0 3px var(--lms-orange-light) !important;
}


/* Add Customer Note button — scoped tightly, overrides all bstyles width/height */
input.cust-note-add-btn,
.cust-note-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 200px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 6px 20px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}
input.cust-note-add-btn:hover,
.cust-note-add-btn:hover {
    background: var(--lms-orange-dark) !important;
}



/* ================================================================
   WORKSHOP BLOCKS  (.ws-admin-wrap)
   Hidden by default — productPageLoaded JS shows it when Workshop tab activates.
   ================================================================ */

.ws-admin-wrap {
    display: none;
}

/* ================================================================
   PRODUCT PAGES  (.product-details-page, .product-sub-page)
   ================================================================ */

/* Product sub-controls — strip old page wrapper chrome,
   inherit customer-info-page fieldset/form-fields styling */
.product-sub-page {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.product-sub-page .page-title,
.product-sub-page > .title:first-child {
    display: none !important;
}

/* Tab container top margin for product email sub-page */
.product-sub-page .page-body > .ajax__tab_container,
.product-sub-page .page-body > div > .ajax__tab_container {
    margin-top: 16px !important;
}

/* Extend customer-info-page fieldset rules to product sub-pages */
.product-sub-page .fieldset {
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
}
.product-sub-page .fieldset .title {
    background: var(--lms-grey-800) !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    border-radius: var(--lms-radius-lg) var(--lms-radius-lg) 0 0 !important;
}
.product-sub-page .fieldset .title strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: none !important;
}
.product-sub-page .form-fields {
    padding: 12px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.product-sub-page .inputs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    min-height: 36px !important;
}
.product-sub-page .inputs > label {
    display: inline-block !important;
    width: 150px !important;
    min-width: 150px !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
    font-weight: 500 !important;
}
/* Direct .inputs children of .fieldset (no .form-fields wrapper) */
.product-sub-page .fieldset > .inputs,
.customer-info-page .fieldset > .inputs {
    padding: 10px 18px !important;
    margin: 0 !important;
}
.product-sub-page .fieldset > .inputs:first-of-type,
.customer-info-page .fieldset > .inputs:first-of-type {
    padding-top: 14px !important;
}
.product-sub-page .fieldset > .inputs:last-of-type,
.customer-info-page .fieldset > .inputs:last-of-type {
    padding-bottom: 14px !important;
}

.product-sub-page .buttons {
    display: flex !important;
    gap: 8px !important;
    padding: 8px 18px 14px !important;
}

/* product-details-page PleaseWait — same pattern as group-details-page */
.product-details-page .cd-please-wait,
.product-add-page .cd-please-wait {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.product-details-page .cd-please-wait[style*="block"],
.product-add-page .cd-please-wait[style*="block"] {
    display: inline-flex !important;
}

/* cd-title label on ProductAdd */
.product-add-page .cd-title,
.product-details-page .cd-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--lms-grey-900) !important;
    font-family: var(--lms-font) !important;
}


/* ================================================================
   CONFERENCE PAGES  (.conference-*-page)
   ================================================================ */

/* Conference session list — card-style rows */
.conference-list-page .conf-session-list {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}
.conference-list-page .conf-session-list tr td.odd {
    padding: 14px 18px !important;
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-left: 3px solid var(--lms-orange) !important;
    border-radius: var(--lms-radius-lg) !important;
    vertical-align: middle !important;
}
/* Inner layout — details left, buttons right */
.conference-list-page .conf-session-list td.odd {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.conference-list-page .conf-session-list .details {
    flex: 1 !important;
    min-width: 0 !important;
}
.conference-list-page .conf-session-list .details .title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--lms-grey-900) !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
}
.conference-list-page .conf-session-list .details .title a,
.conference-list-page .conf-session-list .details .title a:link,
.conference-list-page .conf-session-list .details .title a:visited {
    color: var(--lms-orange) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.conference-list-page .conf-session-list .details .title a:hover {
    text-decoration: underline !important;
}
.conference-list-page .conf-session-list .details .description {
    font-size: 13px !important;
    color: var(--lms-grey-500) !important;
    margin-bottom: 4px !important;
}
.conference-list-page .conf-session-list .details .additional-info {
    font-size: 12px !important;
    color: var(--lms-grey-400) !important;
}
/* Buttons — right side, flex row */
.conference-list-page .conf-session-list .buttons-right {
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
}
.conference-list-page .conf-session-list .buttongroup {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
}
.conference-list-page .conf-session-list .buttongroup li {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    list-style: none !important;
}

/* Small button variant for conference action buttons */
.gc-btn-sm,
input.gc-btn-sm,
a.gc-btn-sm {
    padding: 4px 10px !important;
    font-size: 12px !important;
    min-height: 26px !important;
    height: auto !important;
    line-height: 1 !important;
}

/* All buttons in conference buttongroup — small uniform size */
.conference-list-page .buttongroup a,
.conference-list-page .buttongroup a.ButtonBlue,
.conference-list-page .buttongroup .ButtonBlue,
.conference-list-page .buttongroup input[type=submit],
.conference-list-page .buttongroup input[type=button] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    height: 28px !important;
    min-height: 0 !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: 1px solid var(--lms-orange) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background .12s !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
/* span.icon inside GetActionLinks anchors */
.conference-list-page .buttongroup a span.icon {
    font-size: 12px !important;
    line-height: 1 !important;
}
.conference-list-page .buttongroup a:hover,
.conference-list-page .buttongroup a.ButtonBlue:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* Refresh and Edit — grey secondary style */
.conference-list-page .buttongroup input[type=submit],
.conference-list-page .buttongroup input[type=button] {
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    border-color: var(--lms-grey-200) !important;
}
.conference-list-page .buttongroup input[type=submit]:hover,
.conference-list-page .buttongroup input[type=button]:hover {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
}

/* Filter row */
.conference-list-page .conf-filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
}

/* Footer buttons (Delete etc.) */
.cd-page-footer-buttons {
    display: flex !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    margin-top: 8px !important;
}

/* Conference add-users page */
.conference-add-users-page .page-body {
    padding: 16px 0 !important;
}

/* ================================================================
   USER REPORT PAGE  (.user-report-page)
   ================================================================ */

/* Page header shown by codebehind once data loads */
.user-report-page .cd-page-header[style*="block"],
.user-report-page .cd-page-header:not([style*="none"]) {
    display: flex !important;
}

/* Achievement cert link rendered by lAchievementCertLink Literal */
.user-report-page .cd-page-header-right a,
.user-report-page .cd-page-header-right .cd-page-header-buttons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    height: auto !important;
    min-height: 34px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: 1px solid var(--lms-orange) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background .15s !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.user-report-page .cd-page-header-right a:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}

/* Empty message */
.user-report-page .cust-empty-msg {
    padding: 20px !important;
    color: var(--lms-grey-500) !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* ================================================================
   CUSTOMER ROLE MAPPINGS  (.crm-*)
   ================================================================ */

.crm-panel {
    margin-top: 16px !important;
}

/* adminContent table inside crm-body — reset visual styles only.
   DO NOT override display: the JS in CustomerDetails.ascx calls
   jQuery("#updCustomerRoles table.adminContent").show() to reveal it. */
.crm-body table.adminContent {
    width: 100% !important;
    border: none !important;
    background: none !important;
}
.crm-body table.adminContent td {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    vertical-align: top !important;
}

/* Body of the roles panel */
.crm-body {
    padding: 16px 18px !important;
}

/* SelectCustomerRolesControl renders a CheckBoxList — style each item */
.crm-roles-control {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Each checkbox row rendered by CheckBoxList */
.crm-roles-control table,
.crm-roles-control tbody,
.crm-roles-control tr,
.crm-roles-control td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.crm-roles-control label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
    cursor: pointer !important;
    padding: 6px 10px !important;
    border-radius: var(--lms-radius-md) !important;
    transition: background .12s !important;
    width: auto !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
.crm-roles-control label:hover {
    background: var(--lms-grey-50) !important;
}

.crm-roles-control input[type=checkbox] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    accent-color: var(--lms-orange) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* adminInput fallback — if CssClass is not overridden */
.crm-panel .adminInput {
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ================================================================
   TELERIK RADCOMBOBOX DROPDOWN  (.courselist / .skilllist)
   The dropdown list renders outside the panel in a Telerik slide
   div — scope by .RadComboBoxDropDown and the Silk skin class.
   ================================================================ */

/* Input field font */
.customer-info-page .courselist .rcbInput,
.customer-info-page .skilllist  .rcbInput {
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    color: var(--lms-grey-700) !important;
}

/* Dropdown popup — Telerik appends this to <body> with skin class */
div.RadComboBoxDropDown.RadComboBoxDropDown_Silk .rcbList,
div.RadComboBoxDropDown_Silk .rcbItem,
div.RadComboBoxDropDown_Silk .rcbHovered {
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    color: var(--lms-grey-700) !important;
    line-height: 1.5 !important;
}

div.RadComboBoxDropDown_Silk .rcbItem {
    padding: 6px 10px !important;
}

div.RadComboBoxDropDown_Silk .rcbHovered {
    background: var(--lms-orange-light) !important;
    color: var(--lms-orange-text) !important;
}

div.RadComboBoxDropDown_Silk .rcbCheckAllItems {
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
}

/* ================================================================
   17. UTILITIES / RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
    .header-menu .top-menu   { display: none !important; }
    .header-menu #mob-menu-button { display: block !important; }
    .lms-header-main         { flex-wrap: wrap; padding: 10px 16px; }
    .lms-header-selectors    { display: none; }
}

/* ================================================================
   19. GROUPS GRID  (#GroupsGrid — reuses .cust-* from section 18)
   ================================================================ */

#gridcontainer {
    width: 100%;
    overflow-x: auto;
}

#GroupsGrid {
    width: 100%;
    border-collapse: collapse !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
}

#GroupsGrid .col-select { width: 30px  !important; text-align: center !important; }
#GroupsGrid .col-sm     { width: 70px  !important; }
#GroupsGrid .col-action { width: 100px !important; text-align: center !important; }
#GroupsGrid .col-name   { min-width: 200px !important; }

#GroupsGrid thead th {
    background:     var(--lms-grey-100) !important;
    border:         1px solid var(--lms-grey-200) !important;
    padding:        8px 12px !important;
    text-align:     left !important;
    white-space:    nowrap !important;
    cursor:         pointer !important;
    user-select:    none !important;
    font-size:      12px !important;
    font-weight:    600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color:          var(--lms-grey-500) !important;
}
#GroupsGrid thead th.no-sort { cursor: default !important; }

#GroupsGrid tbody tr:nth-child(even) { background: var(--lms-grey-50) !important; }
#GroupsGrid tbody tr:hover           { background: var(--lms-orange-light) !important; cursor: pointer !important; }
#GroupsGrid tbody tr.selected-row    {
    background:     var(--lms-orange-light) !important;
    outline:        1px solid var(--lms-orange) !important;
    outline-offset: -1px !important;
}

#GroupsGrid td {
    border:         1px solid var(--lms-grey-200) !important;
    padding:        7px 12px !important;
    vertical-align: middle !important;
    color:          var(--lms-grey-700) !important;
    font-size:      13px !important;
}
#GroupsGrid td.col-bool   { text-align: center !important; color: var(--lms-green) !important; font-size: 14px !important; }
#GroupsGrid td.col-select { text-align: center !important; }
#GroupsGrid td.col-action { text-align: center !important; }
#GroupsGrid td.col-empty  { text-align: center !important; padding: 24px !important; color: var(--lms-grey-400) !important; }

#GroupsGrid td a.cust-action {
    display:         inline-flex !important;
    align-items:     center !important;
    padding:         5px 10px !important;
    border-radius:   var(--lms-radius-sm) !important;
    font-size:       12px !important;
    font-weight:     600 !important;
    text-decoration: none !important;
    white-space:     nowrap !important;
    border:          1px solid var(--lms-grey-200) !important;
    background:      var(--lms-grey-100) !important;
    color:           var(--lms-grey-700) !important;
    transition:      background .15s, color .15s, border-color .15s !important;
}
#GroupsGrid td a.cust-action:hover {
    background:      var(--lms-orange) !important;
    color:           #fff !important;
    border-color:    var(--lms-orange) !important;
    text-decoration: none !important;
}

/* Pager — reuse #UsersGridPager rules via shared ID on GroupsGridPager */
#GroupsGridPager {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--lms-grey-200) !important;
    font-size: 13px !important;
    color: var(--lms-grey-500) !important;
    flex-wrap: wrap !important;
}
#GroupsGridPager .cust-btn {
    padding:        5px 7px !important;
    line-height:    1 !important;
    display:        inline-flex !important;
    align-items:    center !important;
    justify-content:center !important;
    color:          var(--lms-grey-600) !important;
    min-width:      30px !important;
}
#GroupsGridPager .cust-btn:disabled { opacity: .3 !important; cursor: default !important; }
#GroupsGridPager .cust-btn svg      { display: block !important; pointer-events: none !important; }

#grpPageInput {
    width:         36px !important;
    text-align:    center !important;
    padding:       4px 4px !important;
    font-size:     13px !important;
    border-radius: var(--lms-radius-sm) !important;
    border:        1px solid var(--lms-grey-300) !important;
    background:    var(--lms-grey-50) !important;
    color:         var(--lms-grey-700) !important;
}
#grpPageSizeSelect {
    padding:       5px 8px !important;
    font-size:     13px !important;
    border-radius: var(--lms-radius-sm) !important;
    border:        1px solid var(--lms-grey-300) !important;
    background:    #fff !important;
    color:         var(--lms-grey-700) !important;
    cursor:        pointer !important;
}

/* ================================================================
   PRODUCTS GRID  (#ProductsGrid — reuses .cust-* from customers)
   ================================================================ */

.prod-grid-wrap {
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

#ProductsGrid {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

    #ProductsGrid thead tr {
        background: var(--lms-grey-50) !important;
        border-bottom: 2px solid var(--lms-grey-200) !important;
    }

    #ProductsGrid thead th {
        padding: 10px 12px !important;
        text-align: left !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--lms-grey-500) !important;
        white-space: nowrap !important;
        background: var(--lms-grey-50) !important;
    }

        #ProductsGrid thead th:not(.no-sort) {
            cursor: pointer !important;
        }

            #ProductsGrid thead th:not(.no-sort):hover {
                color: var(--lms-grey-900) !important;
            }

        #ProductsGrid thead th.sort-asc::after {
            content: ' ↑';
            color: var(--lms-orange);
        }

        #ProductsGrid thead th.sort-desc::after {
            content: ' ↓';
            color: var(--lms-orange);
        }

    #ProductsGrid tbody tr {
        border-bottom: 1px solid var(--lms-grey-100) !important;
        transition: background .1s !important;
    }

        #ProductsGrid tbody tr:last-child {
            border-bottom: none !important;
        }

        #ProductsGrid tbody tr:hover {
            background: var(--lms-grey-50) !important;
        }

    #ProductsGrid tbody td {
        padding: 10px 12px !important;
        color: var(--lms-grey-700) !important;
        vertical-align: middle !important;
        background: transparent !important;
    }

    #ProductsGrid .col-empty {
        text-align: center !important;
        padding: 24px !important;
        color: var(--lms-grey-400) !important;
    }

    #ProductsGrid .col-bool {
        width: 70px !important;
        text-align: center !important;
    }

    #ProductsGrid .col-action {
        width: 80px !important;
    }


/* ================================================================
   CUSTOMER DETAILS PAGE  (.customer-details-page / .cd-*)
   ================================================================ */

/* Page header */
.cd-page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 0 12px !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
    margin-bottom: 16px !important;
}
.cd-page-header-left { flex: 1 !important; min-width: 0 !important; }
.cd-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--lms-grey-900) !important;
    margin: 0 0 4px !important;
}
.cd-breadcrumb {
    font-size: 12px !important;
    color: var(--lms-grey-400) !important;
}
.cd-breadcrumb a {
    color: var(--lms-orange) !important;
    text-decoration: none !important;
}
.cd-breadcrumb a:hover { text-decoration: underline !important; }

/* Action buttons */
.cd-page-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}
.cd-btn,
input.cd-btn,
input[type=submit].cd-btn,
input[type=button].cd-btn,
button.cd-btn,
a.cd-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    height: auto !important;
    min-height: 34px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    border: 1px solid var(--lms-grey-200) !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s, color .15s !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}
.cd-btn:hover,
input.cd-btn:hover,
button.cd-btn:hover { background: var(--lms-grey-200) !important; color: var(--lms-grey-900) !important; }

.cd-btn-primary,
input.cd-btn-primary,
input[type=submit].cd-btn-primary,
button.cd-btn-primary {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.cd-btn-primary:hover,
input.cd-btn-primary:hover,
button.cd-btn-primary:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}
.cd-btn-danger,
input.cd-btn-danger,
input[type=submit].cd-btn-danger,
button.cd-btn-danger {
    background: var(--lms-red-light) !important;
    color: var(--lms-red-text) !important;
    border-color: var(--lms-red) !important;
}
.cd-btn-danger:hover,
input.cd-btn-danger:hover,
button.cd-btn-danger:hover { background: var(--lms-red) !important; color: #fff !important; }

/* Please wait indicator */
.cd-please-wait {
    display: none;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--lms-orange) !important;
    font-weight: 500 !important;
    padding: 7px 0 !important;
}
.cd-please-wait[style*="block"] { display: flex !important; }

/* Modal popup (delete confirm) */
.cd-modal-popup {
    width: 320px !important;
    background: #fff !important;
    border-radius: var(--lms-radius-xl) !important;
    box-shadow: var(--lms-shadow-modal) !important;
    overflow: hidden !important;
}
.cd-modal-body {
    padding: 24px 20px 20px !important;
    text-align: center !important;
}
.cd-modal-body p {
    font-size: 14px !important;
    color: var(--lms-grey-700) !important;
    margin: 0 0 20px !important;
    line-height: 1.5 !important;
}
.cd-modal-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Tab bar — extend existing #horizontalTab rules to #customerTabs */
div#customerTabs,
div#customerTabs.r-tabs {
    background: transparent !important;
    border: none !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}
div#customerTabs ul.r-tabs-nav,
div#customerTabs > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    background: var(--lms-grey-100) !important;
    border-top: 1px solid var(--lms-grey-200) !important;
    border-bottom: 3px solid var(--lms-grey-200) !important;
    box-shadow: none !important;
}
div#customerTabs ul.r-tabs-nav li,
div#customerTabs > ul > li {
    list-style: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
}
div#customerTabs ul.r-tabs-nav li a,
div#customerTabs > ul > li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    transition: color .15s, border-color .15s, background .15s !important;
    line-height: 1 !important;
    margin: 0 !important;
}
div#customerTabs ul.r-tabs-nav li a:link,
div#customerTabs ul.r-tabs-nav li a:visited { color: #4b5563 !important; }
div#customerTabs ul.r-tabs-nav li a:hover,
div#customerTabs > ul > li a:hover {
    color: var(--lms-grey-800) !important;
    border-bottom-color: var(--lms-grey-400) !important;
    background: rgba(0,0,0,.04) !important;
}
div#customerTabs ul.r-tabs-nav li.r-tabs-state-active a,
div#customerTabs ul.r-tabs-nav li.r-tabs-state-active a:hover,
div#customerTabs ul.r-tabs-nav li.r-tabs-state-active a:link,
div#customerTabs ul.r-tabs-nav li.r-tabs-state-active a:visited,
div#customerTabs > ul > li.r-tabs-state-active a {
    color: var(--lms-orange) !important;
    border-bottom-color: var(--lms-orange) !important;
    font-weight: 600 !important;
    background: #fff !important;
}
div#customerTabs .r-tabs-accordion-title {
    border: none !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
    background: var(--lms-grey-100) !important;
}
div#customerTabs .r-tabs-accordion-title a {
    display: block !important; padding: 12px 16px !important;
    font-size: 13px !important; font-weight: 500 !important;
    color: var(--lms-grey-700) !important; text-decoration: none !important;
}
div#customerTabs .r-tabs-accordion-title.r-tabs-state-active {
    border-left: 3px solid var(--lms-orange) !important;
    background: #fff !important;
}
div#customerTabs .r-tabs-accordion-title.r-tabs-state-active a { color: var(--lms-orange) !important; }
div#customerTabs .r-tabs-panel { padding: 0 !important; border: none !important; background: transparent !important; }


/* ================================================================
   CUSTOMER MAINTENANCE DATA TABLES  (.cust-data-table)
   Used by: CustomerCommunication, CustomerNotes, CustomerCourses,
            CustomerSkills, CustomerReports, CustomerOrders
   ================================================================ */

.cust-data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
}
.cust-data-table thead tr,
.cust-data-table tr.table-header {
    background: var(--lms-grey-800) !important;
}
.cust-data-table thead th,
.cust-data-table tr.table-header th {
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-align: left !important;
    white-space: nowrap !important;
    border: none !important;
    background: transparent !important;
}
.cust-data-table thead th.a-center,
.cust-data-table tr.table-header th.a-center { text-align: center !important; }

.cust-data-table tbody tr {
    border-bottom: 1px solid var(--lms-grey-100) !important;
    transition: background .1s !important;
}
.cust-data-table tbody tr:last-child { border-bottom: none !important; }
.cust-data-table tbody tr:hover { background: var(--lms-grey-50) !important; }

.cust-data-table tbody td {
    padding: 9px 12px !important;
    color: var(--lms-grey-700) !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: none !important;
}
.cust-data-table tbody td.a-center { text-align: center !important; }
.cust-data-table tbody td.a-left   { text-align: left !important; }

/* button-1 used throughout customer maintenance screens */
.customer-info-page .button-1,
.customer-info-page input.button-1,
.customer-info-page a.button-1 {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 14px !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background .15s !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.customer-info-page .button-1:hover,
.customer-info-page input.button-1:hover,
.customer-info-page a.button-1:hover {
    background: var(--lms-orange-dark) !important;
    color: #fff !important;
}

/* Buttons inside data table rows — secondary (grey) style */
.cust-data-table .button-1,
.cust-data-table input.button-1 {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 10px !important;
    border-radius: var(--lms-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    border: 1px solid var(--lms-grey-200) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .12s, color .12s !important;
    box-shadow: none !important;
}
.cust-data-table .button-1:hover,
.cust-data-table input.button-1:hover {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
}


/* ================================================================
   CUSTOMER DATA TABLE BUTTONS  (.cust-data-btn)
   Used by CustomerVideos, CustomerCourses, CustomerSkills etc.
   Explicit height:auto overrides bstyles .button-1 { height:25px }
   ================================================================ */

.cust-data-btn,
input.cust-data-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 12px !important;
    height: auto !important;
    min-height: 30px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    border: 1px solid var(--lms-grey-200) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .12s, color .12s !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
.cust-data-btn:hover,
input.cust-data-btn:hover {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
}

/* Primary — orange (Update) */
.cust-data-btn-primary,
input.cust-data-btn-primary {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.cust-data-btn-primary:hover,
input.cust-data-btn-primary:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}

/* Danger — red (Delete) */
.cust-data-btn-danger,
input.cust-data-btn-danger {
    background: var(--lms-red-light) !important;
    color: var(--lms-red-text) !important;
    border-color: var(--lms-red) !important;
}
.cust-data-btn-danger:hover,
input.cust-data-btn-danger:hover {
    background: var(--lms-red) !important;
    color: #fff !important;
}

/* Date input in video/course rows */
.cust-data-input,
input.cust-data-input {
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: var(--lms-radius-sm) !important;
    border: 1px solid var(--lms-grey-300) !important;
    color: var(--lms-grey-700) !important;
    background: #fff !important;
    width: 100px !important;
    height: auto !important;
    box-sizing: border-box !important;
}
.cust-data-input:focus,
input.cust-data-input:focus {
    outline: none !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 0 0 3px var(--lms-orange-light) !important;
}

/* Wrap table in a bordered card like other grids */
.cust-data-table-wrap {
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* Neutralise bstyles.css .section rules inside order cards */
.order-list-page .section {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: visible !important;
    position: relative !important;
}
.order-list-page .section .title {
    background: none !important;
    color: var(--lms-grey-900) !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    border: none !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.order-list-page .section .title strong {
    background: none !important;
    color: var(--lms-grey-900) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.order-list-page .section ul.info {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    color: var(--lms-grey-500) !important;
}
.order-list-page .section ul.info li {
    display: inline !important;
    visibility: visible !important;
    color: var(--lms-grey-500) !important;
    font-size: 12.5px !important;
    background: none !important;
    list-style: none !important;
}

/* Order cards */
.order-list-page .order-item {
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
    border-left: 3px solid var(--lms-orange) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.order-list-page .order-item .order-item-body {
    flex: 1 !important;
    min-width: 0 !important;
}
.order-list-page .order-item .title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--lms-grey-900) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: none !important;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}
.order-list-page .order-item .title strong {
    color: var(--lms-grey-900) !important;
    background: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.order-list-page .order-item .info li {
    display: inline !important;
    visibility: visible !important;
    font-size: 12.5px !important;
    color: var(--lms-grey-500) !important;
    list-style: none !important;
}
.order-list-page .order-item .info {
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    font-size: 12.5px !important;
    color: var(--lms-grey-500) !important;
}
.order-list-page .order-item .buttons {
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.order-list-page .order-item .buttons input[type=submit],
.order-list-page .order-item .buttons input[type=button],
.order-list-page .order-item .buttons .button-2,
.order-list-page .order-item .buttons a.button-2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    height: auto !important;
    min-height: 36px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
.order-list-page .order-item .buttons input[type=submit]:hover,
.order-list-page .order-item .buttons input[type=button]:hover,
.order-list-page .order-item .buttons .button-2:hover,
.order-list-page .order-item .buttons a.button-2:hover {
    background: var(--lms-orange-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Assign fieldset inside CustomerCourses/Skills */
.customer-info-page #pnlAssignCourses,
.customer-info-page #pnlAssignSkills,
.customer-info-page #pnlAddNote {
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    overflow: hidden !important;
    margin-top: 16px !important;
}
.customer-info-page #pnlAssignCourses .title,
.customer-info-page #pnlAssignSkills .title,
.customer-info-page #pnlAddNote .title {
    background: var(--lms-grey-800) !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 !important;
}
.customer-info-page #pnlAssignCourses .title strong,
.customer-info-page #pnlAssignSkills .title strong,
.customer-info-page #pnlAddNote .title strong {
    color: #fff !important;
    background: none !important;
}
.customer-info-page .courselist-container,
.customer-info-page .skilllist-container,
.customer-info-page #pnlAssignCourses .form-fields,
.customer-info-page #pnlAssignSkills .form-fields,
.customer-info-page #pnlAddNote .form-fields {
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force the UpdatePanel table cell that wraps form-fields to be full-width and left-aligned */
.customer-info-page #pnlAssignCourses table,
.customer-info-page #pnlAssignSkills table,
.customer-info-page #pnlAssignCourses td,
.customer-info-page #pnlAssignSkills td {
    width: 100% !important;
    text-align: left !important;
}

/* Assign-course / assign-skill panel: labels sit inline (not fixed-width column) */
.customer-info-page #pnlAssignCourses .form-fields > label,
.customer-info-page #pnlAssignCourses .form-fields .lbl,
.customer-info-page #pnlAssignSkills .form-fields > label,
.customer-info-page #pnlAssignSkills .form-fields .lbl {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    line-height: normal !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
}

/* .courselist / .skilllist inner wrapper — the real container for the four controls */
.customer-info-page #pnlAssignCourses .form-fields .courselist,
.customer-info-page #pnlAssignSkills .form-fields .skilllist {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* UpdatePanel wrapper is transparent — use display:contents so .courselist flex is unbroken */
.customer-info-page #pnlAssignCourses .form-fields > div,
.customer-info-page #pnlAssignCourses .form-fields > span,
.customer-info-page #pnlAssignSkills .form-fields > div,
.customer-info-page #pnlAssignSkills .form-fields > span {
    display: contents !important;
}

/* Constrain RadComboBox so it does not stretch to full row width */
.customer-info-page #pnlAssignCourses .form-fields .courselist .RadComboBox,
.customer-info-page #pnlAssignSkills  .form-fields .skilllist  .RadComboBox {
    flex: 0 0 auto !important;
    max-width: 340px !important;
    width: auto !important;
}

/* Selects inside the assign panels — auto width, not fixed 360px */
.customer-info-page #pnlAssignCourses .form-fields select,
.customer-info-page #pnlAssignSkills .form-fields select {
    width: auto !important;
    min-width: 200px !important;
    max-width: 320px !important;
    flex: none !important;
}

/* Buttons inside the assign panels — orange primary style */
.customer-info-page #pnlAssignCourses .form-fields input[type=button],
.customer-info-page #pnlAssignCourses .form-fields input[type=submit],
.customer-info-page #pnlAssignSkills .form-fields input[type=button],
.customer-info-page #pnlAssignSkills .form-fields input[type=submit] {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    height: 34px !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    flex-shrink: 0 !important;
}
.customer-info-page #pnlAssignCourses .form-fields input[type=button]:hover,
.customer-info-page #pnlAssignCourses .form-fields input[type=submit]:hover,
.customer-info-page #pnlAssignSkills .form-fields input[type=button]:hover,
.customer-info-page #pnlAssignSkills .form-fields input[type=submit]:hover {
    background: var(--lms-orange-dark) !important;
}
.customer-info-page #pnlAddNote .form-fields { flex-direction: column !important; align-items: stretch !important; }
.customer-info-page #pnlAddNote textarea {
    width: 100% !important;
    max-width: 600px !important;
    height: 80px !important;
    padding: 8px 10px !important;
    border-radius: var(--lms-radius-md) !important;
    border: 1px solid var(--lms-grey-300) !important;
    font-size: 13px !important;
    resize: vertical !important;
}
.customer-info-page #pnlAddNote .buttons { padding: 0 18px 14px !important; }

/* CustomerCourses exam modal — modernise */
.modal-content {
    border-radius: var(--lms-radius-xl) !important;
    box-shadow: var(--lms-shadow-modal) !important;
}
.modal-title { font-size: 18px !important; font-weight: 700 !important; color: var(--lms-grey-900) !important; }
.close-btn { background: var(--lms-orange) !important; }
.close-btn:hover { background: var(--lms-orange-dark) !important; }
.exam-records-table th { background: var(--lms-grey-50) !important; color: var(--lms-grey-700) !important; }


/* ================================================================
   CUSTOMER MAINTENANCE FORMS  (.customer-info-page)
   Replaces bstyles.css: .fieldset, .inputs, .title, .form-fields,
   .ButtonBlue for these pages — those classes can be removed from
   bstyles.css once all customer screens are updated.
   ================================================================ */

.customer-info-page {
    background: #fff !important;
}

.customer-info-page .fieldset {
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}
.customer-info-page .fieldset .title {
    background: var(--lms-grey-800) !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.customer-info-page .fieldset .title strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: none !important;
    letter-spacing: .01em !important;
}

/* Form fields — flex column, each .inputs row is a flex row */
.customer-info-page .form-fields {
    padding: 12px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.customer-info-page .inputs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    min-height: 36px !important;
}
/* Label — fixed 150px, LEFT-aligned */
.customer-info-page .inputs > label,
.customer-info-page .inputs > .lbl {
    display: inline-block !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    flex-shrink: 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--lms-grey-500) !important;
    margin: 0 !important;
    text-align: left !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    line-height: 34px !important;
}
/* Inputs — fixed width, never flex-grow */
.customer-info-page .inputs input[type=text],
.customer-info-page .inputs input[type=password],
.customer-info-page .inputs input[type=email],
.customer-info-page .inputs textarea,
.customer-info-page .inputs select {
    width: 360px !important;
    flex: none !important;
    padding: 6px 10px !important;
    border-radius: var(--lms-radius-md) !important;
    border: 1px solid var(--lms-grey-300) !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
    background: #fff !important;
    height: 34px !important;
    box-sizing: border-box !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.customer-info-page .inputs textarea {
    height: 80px !important;
    resize: vertical !important;
}
.customer-info-page .inputs input:focus,
.customer-info-page .inputs textarea:focus,
.customer-info-page .inputs select:focus {
    outline: none !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 0 0 3px var(--lms-orange-light) !important;
}
.customer-info-page .inputs input[type=checkbox],
.customer-info-page .inputs input[type=radio] {
    width: 16px !important;
    height: 16px !important;
    flex: none !important;
    accent-color: var(--lms-orange) !important;
    cursor: pointer !important;
}
.customer-info-page .inputs .gender {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-right: 12px !important;
}
/* UpdatePanel wrappers — treat as transparent flex containers */
.customer-info-page .inputs > div[id],
.customer-info-page .inputs > span[id] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
/* Error message — hidden by default via runat="server" style="display:none"
   Code-behind sets Visible=true when there is an error to show */
.customer-info-page .message-Error {
    background: var(--lms-red-light) !important;
    color: var(--lms-red-text) !important;
    border: 1px solid var(--lms-red) !important;
    border-radius: var(--lms-radius-md) !important;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
}

.customer-info-page .ButtonBlue,
.customer-info-page input.ButtonBlue {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    height: 34px !important;
    transition: background .15s !important;
    white-space: nowrap !important;
}
.customer-info-page .ButtonBlue:hover,
.customer-info-page input.ButtonBlue:hover { background: var(--lms-orange-dark) !important; }

/* Hide ALL validator spans by default — ASP.NET controls visibility via inline style
   We suppress the initial render and only show when style="display:inline" is set
   by client-side validation or a postback */
.customer-info-page span[id*="txtEmail"],
.customer-info-page .inputs span {
    display: none !important;
}
.customer-info-page .inputs span[style*="display: inline"],
.customer-info-page .inputs span[style*="display:inline"],
.customer-info-page .inputs span[style*="display: block"],
.customer-info-page .inputs span[style*="display:block"] {
    display: inline !important;
    color: var(--lms-red-text) !important;
    font-size: 12px !important;
    margin-left: 6px !important;
}
.customer-info-page .progress {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: var(--lms-grey-400) !important;
    padding: 4px 0 !important;
}
/* ASP.NET UpdateProgress sets display:block when active */
.customer-info-page .progress[style*="display: block"],
.customer-info-page .progress[style*="display:block"] {
    display: flex !important;
}
.customer-info-page .inputs .adminInput,
.product-sub-page .inputs .adminInput {
    height: auto !important;
    max-width: 400px !important;
}
.customer-info-page .inputs textarea.adminInput,
.customer-info-page .inputs select[size].adminInput,
.product-sub-page .inputs textarea.adminInput,
.product-sub-page .inputs select[size].adminInput {
    height: 100px !important;
}
/* Checkboxes — asp:CheckBox wraps input in a span, target both */
.customer-info-page .inputs input[type=checkbox].adminInput,
.customer-info-page .inputs span input[type=checkbox],
.customer-info-page .inputs > input[type=checkbox],
.product-sub-page .inputs input[type=checkbox].adminInput,
.product-sub-page .inputs span input[type=checkbox],
.product-sub-page .inputs > input[type=checkbox] {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    max-width: 16px !important;
    flex: 0 0 16px !important;
    accent-color: var(--lms-orange) !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* span wrapper from asp:CheckBox — must not collapse */
.customer-info-page .inputs > span:has(input[type=checkbox]),
.product-sub-page .inputs > span:has(input[type=checkbox]) {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Inline label (e.g. Show All Quizzes beside dropdown) */
.customer-info-page .inputs .lbl-inline,
.product-sub-page .inputs .lbl-inline {
    width: auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
    white-space: nowrap !important;
}





/* ================================================================
   CUSTOMER NOTES  (.cust-notes-*)
   ================================================================ */

/* Add-note form-fields — column layout with textarea + button */
.customer-info-page #pnlAddNote .form-fields {
    padding: 14px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ButtonBlue inside pnlAddNote must NOT stretch full width */
.customer-info-page #pnlAddNote .form-fields .ButtonBlue,
.customer-info-page #pnlAddNote .form-fields input.ButtonBlue {
    width: auto !important;
    align-self: flex-start !important;
}

.cust-notes-textarea,
textarea.cust-notes-textarea {
    width: 100% !important;
    max-width: 600px !important;
    min-height: 80px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: var(--lms-radius-md) !important;
    border: 1px solid var(--lms-grey-300) !important;
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    color: var(--lms-grey-700) !important;
    background: #fff !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}
.cust-notes-textarea:focus,
textarea.cust-notes-textarea:focus {
    outline: none !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 0 0 3px var(--lms-orange-light) !important;
}


/* Add Customer Note button — scoped tightly, overrides all bstyles width/height */
input.cust-note-add-btn,
.cust-note-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 200px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 6px 20px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}
input.cust-note-add-btn:hover,
.cust-note-add-btn:hover {
    background: var(--lms-orange-dark) !important;
}



/* ================================================================
   WORKSHOP BLOCKS  (.ws-admin-wrap)
   Hidden by default — productPageLoaded JS shows it when Workshop tab activates.
   ================================================================ */

.ws-admin-wrap {
    display: none;
}

/* ================================================================
   PRODUCT PAGES  (.product-details-page, .product-sub-page)
   ================================================================ */

/* Product sub-controls — strip old page wrapper chrome,
   inherit customer-info-page fieldset/form-fields styling */
.product-sub-page {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.product-sub-page .page-title,
.product-sub-page > .title:first-child {
    display: none !important;
}

/* Tab container top margin for product email sub-page */
.product-sub-page .page-body > .ajax__tab_container,
.product-sub-page .page-body > div > .ajax__tab_container {
    margin-top: 16px !important;
}

/* Extend customer-info-page fieldset rules to product sub-pages */
.product-sub-page .fieldset {
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-lg) !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
}
.product-sub-page .fieldset .title {
    background: var(--lms-grey-800) !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    border-radius: var(--lms-radius-lg) var(--lms-radius-lg) 0 0 !important;
}
.product-sub-page .fieldset .title strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: none !important;
}
.product-sub-page .form-fields {
    padding: 12px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.product-sub-page .inputs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    min-height: 36px !important;
}
.product-sub-page .inputs > label {
    display: inline-block !important;
    width: 150px !important;
    min-width: 150px !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
    font-weight: 500 !important;
}
/* Direct .inputs children of .fieldset (no .form-fields wrapper) */
.product-sub-page .fieldset > .inputs,
.customer-info-page .fieldset > .inputs {
    padding: 10px 18px !important;
    margin: 0 !important;
}
.product-sub-page .fieldset > .inputs:first-of-type,
.customer-info-page .fieldset > .inputs:first-of-type {
    padding-top: 14px !important;
}
.product-sub-page .fieldset > .inputs:last-of-type,
.customer-info-page .fieldset > .inputs:last-of-type {
    padding-bottom: 14px !important;
}

.product-sub-page .buttons {
    display: flex !important;
    gap: 8px !important;
    padding: 8px 18px 14px !important;
}

/* product-details-page PleaseWait — same pattern as group-details-page */
.product-details-page .cd-please-wait,
.product-add-page .cd-please-wait {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.product-details-page .cd-please-wait[style*="block"],
.product-add-page .cd-please-wait[style*="block"] {
    display: inline-flex !important;
}

/* cd-title label on ProductAdd */
.product-add-page .cd-title,
.product-details-page .cd-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--lms-grey-900) !important;
    font-family: var(--lms-font) !important;
}


/* ================================================================
   CONFERENCE PAGES  (.conference-*-page)
   ================================================================ */

/* Conference session list — card-style rows */
.conference-list-page .conf-session-list {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}
.conference-list-page .conf-session-list tr td.odd {
    padding: 14px 18px !important;
    background: #fff !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-left: 3px solid var(--lms-orange) !important;
    border-radius: var(--lms-radius-lg) !important;
    vertical-align: middle !important;
}
/* Inner layout — details left, buttons right */
.conference-list-page .conf-session-list td.odd {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.conference-list-page .conf-session-list .details {
    flex: 1 !important;
    min-width: 0 !important;
}
.conference-list-page .conf-session-list .details .title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--lms-grey-900) !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
}
.conference-list-page .conf-session-list .details .title a,
.conference-list-page .conf-session-list .details .title a:link,
.conference-list-page .conf-session-list .details .title a:visited {
    color: var(--lms-orange) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.conference-list-page .conf-session-list .details .title a:hover {
    text-decoration: underline !important;
}
.conference-list-page .conf-session-list .details .description {
    font-size: 13px !important;
    color: var(--lms-grey-500) !important;
    margin-bottom: 4px !important;
}
.conference-list-page .conf-session-list .details .additional-info {
    font-size: 12px !important;
    color: var(--lms-grey-400) !important;
}
/* Buttons — right side, flex row */
.conference-list-page .conf-session-list .buttons-right {
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
}
.conference-list-page .conf-session-list .buttongroup {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
}
.conference-list-page .conf-session-list .buttongroup li {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    list-style: none !important;
}

/* Small button variant for conference action buttons */
.gc-btn-sm,
input.gc-btn-sm,
a.gc-btn-sm {
    padding: 4px 10px !important;
    font-size: 12px !important;
    min-height: 26px !important;
    height: auto !important;
    line-height: 1 !important;
}

/* All buttons in conference buttongroup — small uniform size */
.conference-list-page .buttongroup a,
.conference-list-page .buttongroup a.ButtonBlue,
.conference-list-page .buttongroup .ButtonBlue,
.conference-list-page .buttongroup input[type=submit],
.conference-list-page .buttongroup input[type=button] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    height: 28px !important;
    min-height: 0 !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: 1px solid var(--lms-orange) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background .12s !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
/* span.icon inside GetActionLinks anchors */
.conference-list-page .buttongroup a span.icon {
    font-size: 12px !important;
    line-height: 1 !important;
}
.conference-list-page .buttongroup a:hover,
.conference-list-page .buttongroup a.ButtonBlue:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* Refresh and Edit — grey secondary style */
.conference-list-page .buttongroup input[type=submit],
.conference-list-page .buttongroup input[type=button] {
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    border-color: var(--lms-grey-200) !important;
}
.conference-list-page .buttongroup input[type=submit]:hover,
.conference-list-page .buttongroup input[type=button]:hover {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
}

/* Filter row */
.conference-list-page .conf-filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
}

/* Footer buttons (Delete etc.) */
.cd-page-footer-buttons {
    display: flex !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    margin-top: 8px !important;
}

/* Conference add-users page */
.conference-add-users-page .page-body {
    padding: 16px 0 !important;
}

/* ================================================================
   USER REPORT PAGE  (.user-report-page)
   ================================================================ */

/* Page header shown by codebehind once data loads */
.user-report-page .cd-page-header[style*="block"],
.user-report-page .cd-page-header:not([style*="none"]) {
    display: flex !important;
}

/* Achievement cert link rendered by lAchievementCertLink Literal */
.user-report-page .cd-page-header-right a,
.user-report-page .cd-page-header-right .cd-page-header-buttons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    height: auto !important;
    min-height: 34px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border: 1px solid var(--lms-orange) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background .15s !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.user-report-page .cd-page-header-right a:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}

/* Empty message */
.user-report-page .cust-empty-msg {
    padding: 20px !important;
    color: var(--lms-grey-500) !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* ================================================================
   CUSTOMER ROLE MAPPINGS  (.crm-*)
   ================================================================ */

.crm-panel {
    margin-top: 16px !important;
}

/* adminContent table inside crm-body — reset visual styles only.
   DO NOT override display: the JS in CustomerDetails.ascx calls
   jQuery("#updCustomerRoles table.adminContent").show() to reveal it. */
.crm-body table.adminContent {
    width: 100% !important;
    border: none !important;
    background: none !important;
}
.crm-body table.adminContent td {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    vertical-align: top !important;
}

/* Body of the roles panel */
.crm-body {
    padding: 16px 18px !important;
}

/* SelectCustomerRolesControl renders a CheckBoxList — style each item */
.crm-roles-control {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Each checkbox row rendered by CheckBoxList */
.crm-roles-control table,
.crm-roles-control tbody,
.crm-roles-control tr,
.crm-roles-control td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.crm-roles-control label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
    cursor: pointer !important;
    padding: 6px 10px !important;
    border-radius: var(--lms-radius-md) !important;
    transition: background .12s !important;
    width: auto !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
.crm-roles-control label:hover {
    background: var(--lms-grey-50) !important;
}

.crm-roles-control input[type=checkbox] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    accent-color: var(--lms-orange) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* adminInput fallback — if CssClass is not overridden */
.crm-panel .adminInput {
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ================================================================
   TELERIK RADCOMBOBOX DROPDOWN  (.courselist / .skilllist)
   The dropdown list renders outside the panel in a Telerik slide
   div — scope by .RadComboBoxDropDown and the Silk skin class.
   ================================================================ */

/* Input field font */
.customer-info-page .courselist .rcbInput,
.customer-info-page .skilllist  .rcbInput {
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    color: var(--lms-grey-700) !important;
}

/* Dropdown popup — Telerik appends this to <body> with skin class */
div.RadComboBoxDropDown.RadComboBoxDropDown_Silk .rcbList,
div.RadComboBoxDropDown_Silk .rcbItem,
div.RadComboBoxDropDown_Silk .rcbHovered {
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    color: var(--lms-grey-700) !important;
    line-height: 1.5 !important;
}

div.RadComboBoxDropDown_Silk .rcbItem {
    padding: 6px 10px !important;
}

div.RadComboBoxDropDown_Silk .rcbHovered {
    background: var(--lms-orange-light) !important;
    color: var(--lms-orange-text) !important;
}

div.RadComboBoxDropDown_Silk .rcbCheckAllItems {
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
}




/* ================================================================
   GC-BTN — all group pages share .gc-page marker class
   Single rule set beats all bstyles specificity
   ================================================================ */

.gc-page .gc-btn,
.gc-page input.gc-btn,
.gc-page input[type=submit].gc-btn,
.gc-page input[type=button].gc-btn,
.gc-page button.gc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    height: auto !important;
    min-height: 32px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    border: 1px solid var(--lms-grey-200) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .12s, color .12s !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    width: auto !important;
    max-width: none !important;
    text-decoration: none !important;
}
.gc-page .gc-btn:hover,
.gc-page input.gc-btn:hover,
.gc-page button.gc-btn:hover {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
}
.gc-page .gc-btn-primary,
.gc-page input.gc-btn-primary,
.gc-page input[type=submit].gc-btn-primary,
.gc-page button.gc-btn-primary {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.gc-page .gc-btn-primary:hover,
.gc-page input.gc-btn-primary:hover,
.gc-page button.gc-btn-primary:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}
.gc-page .gc-btn-danger,
.gc-page input.gc-btn-danger,
.gc-page input[type=submit].gc-btn-danger,
.gc-page button.gc-btn-danger {
    background: var(--lms-red-light) !important;
    color: var(--lms-red-text) !important;
    border-color: var(--lms-red) !important;
}
.gc-page .gc-btn-danger:hover,
.gc-page input.gc-btn-danger:hover,
.gc-page button.gc-btn-danger:hover {
    background: var(--lms-red) !important;
    color: #fff !important;
}

/* ================================================================
   GROUP USERS PAGE  (.group-users-page)
   ================================================================ */

/* Scope gc-btn for group users page — high specificity to beat bstyles */
.customer-info-page.group-users-page .gc-btn,
.customer-info-page.group-users-page input.gc-btn,
.customer-info-page.group-users-page input[type=submit].gc-btn,
.customer-info-page.group-users-page input[type=button].gc-btn,
.customer-info-page.group-users-page button.gc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    height: auto !important;
    min-height: 32px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    border: 1px solid var(--lms-grey-200) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .12s, color .12s !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    width: auto !important;
    max-width: none !important;
    text-decoration: none !important;
}
.customer-info-page.group-users-page .gc-btn-primary,
.customer-info-page.group-users-page input.gc-btn-primary,
.customer-info-page.group-users-page input[type=submit].gc-btn-primary,
.customer-info-page.group-users-page button.gc-btn-primary {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.customer-info-page.group-users-page .gc-btn-primary:hover,
.customer-info-page.group-users-page input.gc-btn-primary:hover,
.customer-info-page.group-users-page button.gc-btn-primary:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}

/* Header buttons row */
.group-users-page .cd-page-header-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Progress spinner — hidden until UpdatePanel active */
.group-users-page .progress {
    display: none !important;
}
.group-users-page .progress[style*="display: block"],
.group-users-page .progress[style*="display:block"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: var(--lms-grey-500) !important;
}

/* Group dropdown width */
.group-users-page .inputs select#ddlGroupList,
.group-users-page .inputs select[id*="ddlGroupList"] {
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
    border: 1px solid var(--lms-grey-300) !important;
    border-radius: var(--lms-radius-sm) !important;
}

/* Upload import section */
.group-users-page .doc-upload-bar-wrap .inputs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ================================================================
   GROUP PAGES SHARED  (.group-details-page, .group-add-page etc.)
   ================================================================ */

/* Page header actions row (GroupAdd save button above tabs) */
.cd-page-header.cd-page-header-actions {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
    margin-bottom: 16px !important;
}

/* GroupDetails PleaseWait — hidden by default, shown only when JS sets display:block */
.group-details-page .cd-please-wait {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.group-details-page .cd-please-wait[style*="block"] {
    display: inline-flex !important;
}


.customer-info-page.group-details-page .gc-btn-primary,
.customer-info-page.group-details-page input.gc-btn-primary,
.customer-info-page.group-add-page .gc-btn-primary,
.customer-info-page.group-add-page input.gc-btn-primary,
.group-customer-add-page .gc-btn-primary,
.group-customer-add-page input.gc-btn-primary,
.customer-info-page.group-options-page .gc-btn-primary,
.customer-info-page.group-options-page input.gc-btn-primary,
.customer-info-page.group-videos-page .gc-btn-primary,
.customer-info-page.group-videos-page input.gc-btn-primary {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.customer-info-page.group-details-page .gc-btn-primary:hover,
.customer-info-page.group-add-page .gc-btn-primary:hover,
.group-customer-add-page .gc-btn-primary:hover,
.customer-info-page.group-options-page .gc-btn-primary:hover,
.customer-info-page.group-videos-page .gc-btn-primary:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}

.customer-info-page.group-details-page .gc-btn-danger,
.customer-info-page.group-details-page input.gc-btn-danger,
.customer-info-page.group-videos-page .gc-btn-danger,
.customer-info-page.group-videos-page input.gc-btn-danger,
.customer-info-page.group-options-page .gc-btn-danger,
.customer-info-page.group-options-page input.gc-btn-danger {
    background: var(--lms-red-light) !important;
    color: var(--lms-red-text) !important;
    border-color: var(--lms-red) !important;
}
.customer-info-page.group-details-page .gc-btn-danger:hover,
.customer-info-page.group-videos-page .gc-btn-danger:hover,
.customer-info-page.group-options-page .gc-btn-danger:hover {
    background: var(--lms-red) !important;
    color: #fff !important;
}

/* GroupEmails / GroupInfo — TableContainer resets */
.group-emails-page table.TableContainer,
.group-info-page table.TableContainer {
    width: 100% !important;
    border-collapse: collapse !important;
    background: none !important;
}
.group-emails-page table.TableContainer .Row td,
.group-info-page table.TableContainer .Row td {
    padding: 6px 10px !important;
    font-size: 13px !important;
    border: none !important;
    background: none !important;
    vertical-align: middle !important;
}

/* ================================================================
   UPLOADIFIVE QUEUE  (shared by GroupDocuments, CourseDocuments)
   ================================================================ */

/* Hide the progress bar and queue container when idle/empty */
.uploadifive-queue {
    margin-top: 8px !important;
}
.uploadifive-queue:empty {
    display: none !important;
}
/* Progress bar track */
.uploadifive-progress {
    height: 4px !important;
    background: var(--lms-grey-100) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin-top: 6px !important;
}
/* Hide the bare progress bar when no upload is active */
#docuploadify > div.uploadifive-progress:not(:has(.uploadifive-progress-bar)) {
    display: none !important;
}
/* Fallback — hide orphan progress track that uploadifive leaves on idle */
#docuploadify .uploadifive-progress:empty {
    display: none !important;
}
.uploadifive-progress-bar {
    height: 4px !important;
    background: var(--lms-green-dark) !important;
    border-radius: 2px !important;
    transition: width .2s ease !important;
}
.uploadifive-queue-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
    color: var(--lms-grey-600) !important;
    border-bottom: 1px solid var(--lms-grey-100) !important;
}

/* ================================================================
   GROUP COURSES PAGE  (.group-courses-page, .gc-*)
   ================================================================ */

.group-courses-page .gc-instructions,
.group-courses-page .gc-instructions p,
.group-courses-page .gc-instructions *,
.group-users-page .gc-instructions,
.group-users-page .gc-instructions p,
.group-users-page .gc-instructions * {
    font-size: 13px !important;
    color: var(--lms-grey-600) !important;
    line-height: 1.6 !important;
    font-family: var(--lms-font) !important;
}
.group-courses-page .gc-instructions,
.group-users-page .gc-instructions {
    margin: 8px 0 16px !important;
}

/* Table actions bar — sits above the course grid */
.gc-table-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 12px !important;
    margin-bottom: 10px !important;
}

/* Master licence panel — TableContainer */
.group-courses-page table.TableContainer {
    width: 100% !important;
    border-collapse: collapse !important;
    background: none !important;
    margin-bottom: 12px !important;
}
.group-courses-page table.TableContainer .Row td {
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: var(--lms-grey-700) !important;
    border: none !important;
    background: none !important;
    vertical-align: middle !important;
}
.group-courses-page table.TableContainer .ItemName {
    font-weight: 500 !important;
    color: var(--lms-grey-800) !important;
}

/* Pager row below user sub-table */
.group-courses-page .pager {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 4px !important;
    font-size: 12.5px !important;
    color: var(--lms-grey-500) !important;
    flex-wrap: wrap !important;
}
.group-courses-page .pager input[type=text] {
    width: 40px !important;
    padding: 4px 6px !important;
    border: 1px solid var(--lms-grey-300) !important;
    border-radius: var(--lms-radius-sm) !important;
    font-size: 12px !important;
    text-align: center !important;
}

/* Progress spinner — hidden by default, shown only when UpdateProgress is active */
.group-courses-page .progress {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    font-size: 12px !important;
    color: var(--lms-grey-500) !important;
}
/* ASP.NET UpdateProgress sets style="display:block" when active */
.group-courses-page .progress[style*="display: block"],
.group-courses-page .progress[style*="display:block"] {
    display: flex !important;
}

/* Group search dropdown — constrained width, not 360px global */
.group-courses-page .inputs select#ddlGroupList,
.group-courses-page .inputs select[id*="ddlGroupList"] {
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
    border: 1px solid var(--lms-grey-300) !important;
    border-radius: var(--lms-radius-sm) !important;
}
/* UpdatePanel wrapper around the dropdown — no extra height */
.group-courses-page #pnlGroupSearch > div,
.group-courses-page .inputs > div[id*="pnlGroups"] {
    display: contents !important;
}

/* gc-btn — base style (neutral/grey, same spec as cust-data-btn) */
/* gc-btn — scoped under group-courses-page to beat .customer-info-page .inputs input specificity */
.group-courses-page .gc-btn,
.group-courses-page input.gc-btn,
.group-courses-page input[type=submit].gc-btn,
.group-courses-page input[type=button].gc-btn,
.modal-window .gc-btn,
.modal-window input.gc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    height: auto !important;
    min-height: 32px !important;
    line-height: 1 !important;
    border-radius: var(--lms-radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--lms-font) !important;
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-700) !important;
    border: 1px solid var(--lms-grey-200) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .12s, color .12s !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    width: auto !important;
    max-width: none !important;
}
.group-courses-page .gc-btn:hover,
.group-courses-page input.gc-btn:hover,
.modal-window .gc-btn:hover {
    background: var(--lms-grey-200) !important;
    color: var(--lms-grey-900) !important;
}

/* Primary — orange */
.group-courses-page .gc-btn-primary,
.group-courses-page input.gc-btn-primary,
.group-courses-page input[type=submit].gc-btn-primary,
.modal-window .gc-btn-primary,
.modal-window input.gc-btn-primary {
    background: var(--lms-orange) !important;
    color: #fff !important;
    border-color: var(--lms-orange) !important;
    box-shadow: 0 1px 2px rgba(var(--lms-orange-rgb),.25) !important;
}
.group-courses-page .gc-btn-primary:hover,
.group-courses-page input.gc-btn-primary:hover,
.modal-window .gc-btn-primary:hover {
    background: var(--lms-orange-dark) !important;
    border-color: var(--lms-orange-dark) !important;
    color: #fff !important;
}

/* Danger — red (Delete, Remove) */
.group-courses-page .gc-btn-danger,
.group-courses-page input.gc-btn-danger,
.group-courses-page input[type=submit].gc-btn-danger {
    background: var(--lms-red-light) !important;
    color: var(--lms-red-text) !important;
    border-color: var(--lms-red) !important;
}
.group-courses-page .gc-btn-danger:hover,
.group-courses-page input.gc-btn-danger:hover {
    background: var(--lms-red) !important;
    color: #fff !important;
}

/* Bulk expiry date row — label + input + calendar + button all inline.
   Must beat .customer-info-page .inputs label { width:150px; min-width:150px }
   and .customer-info-page .inputs { flex-wrap:wrap } */
.group-courses-page .inputs.gc-expiry-row,
.customer-info-page .group-courses-page .inputs.gc-expiry-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}
.group-courses-page .inputs.gc-expiry-row > label,
.customer-info-page .group-courses-page .inputs.gc-expiry-row > label {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    color: var(--lms-grey-700) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding-right: 0 !important;
    line-height: normal !important;
}
.group-courses-page .inputs.gc-expiry-row input[type=text],
.group-courses-page .inputs.gc-expiry-row input.gc-expiry-input {
    width: 120px !important;
    max-width: 120px !important;
    flex: 0 0 120px !important;
    padding: 5px 8px !important;
    border: 1px solid var(--lms-grey-300) !important;
    border-radius: var(--lms-radius-sm) !important;
    font-size: 13px !important;
    height: auto !important;
}
.group-courses-page .inputs.gc-expiry-row input[type=image],
.group-courses-page .inputs.gc-expiry-row img {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    border: none !important;
}

/* Expiry date label in criteria panel — must not inherit red validator colour */
.group-courses-page #ExpiryDate > label,
.group-courses-page div[id="ExpiryDate"] > label {
    color: var(--lms-grey-700) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* Expiry date field + calendar icon row — inline flex */
.group-courses-page div[id="ExpiryDate"] {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    vertical-align: top !important;
}
.group-courses-page div[id="ExpiryDate"] > br {
    display: none !important;
}
.group-courses-page div[id="ExpiryDate"] input[type=text] {
    width: 120px !important;
    padding: 5px 8px !important;
    border: 1px solid var(--lms-grey-300) !important;
    border-radius: var(--lms-radius-sm) !important;
    font-size: 13px !important;
}

/* Modal — token styles */
.modal-backdrop {
    z-index: 2000 !important;
    background-color: rgba(0,0,0,0.5) !important;
}
.modal-window {
    background: #fff !important;
    border-radius: var(--lms-radius-lg) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.24) !important;
    overflow: visible !important;
}
.modal-header {
    background: var(--lms-grey-50) !important;
    border-bottom: 1px solid var(--lms-grey-200) !important;
    padding: 12px 16px !important;
    overflow: visible !important;
}
.modal-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--lms-grey-900) !important;
    font-family: var(--lms-font) !important;
}
.modal-close {
    color: var(--lms-grey-500) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 2px 6px !important;
    border-radius: var(--lms-radius-sm) !important;
    transition: background .12s !important;
}
.modal-close:hover {
    background: var(--lms-grey-100) !important;
    color: var(--lms-grey-900) !important;
}
.modal-body {
    padding: 20px !important;
    overflow: visible !important;
}
.modal-body .form-fields,
.modal-body .fieldset {
    overflow: visible !important;
}
.modal-body .inputs {
    position: static !important;
    overflow: visible !important;
}

/* Course picker */
.course-picker-wrap {
    position: relative !important;
    flex: 1 !important;
    min-width: 0 !important;
    z-index: 100 !important;
}
#coursePickerBox {
    border: 1px solid var(--lms-grey-300) !important;
    border-radius: var(--lms-radius-md) !important;
    background: #fff !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
    cursor: text !important;
    transition: border-color .15s !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#coursePickerBox:focus-within {
    border-color: var(--lms-orange) !important;
    box-shadow: 0 0 0 3px var(--lms-orange-light) !important;
}
.course-picker-wrap #courseDropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    border: 1px solid var(--lms-grey-200) !important;
    border-radius: var(--lms-radius-md) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
    background: #fff !important;
    z-index: 3000 !important;
    box-sizing: border-box !important;
}
.course-picker-hint {
    font-size: 12px !important;
    color: var(--lms-grey-400) !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
}
#courseTagsContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}
#courseSearchInput {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-family: var(--lms-font) !important;
    width: 200px !important;
    color: var(--lms-grey-700) !important;
}

/* Hide validators in modal until Add is clicked (gc-validated class added by JS) */
#assignGroupPopupContainer span[style*="color:Red"],
#assignGroupPopupContainer span[style*="color: Red"],
#assignGroupPopupContainer span[style*="color:red"],
#assignGroupPopupContainer span[style*="color: red"] {
    display: none !important;
}
#assignGroupPopupContainer.gc-validated span[style*="color:Red"],
#assignGroupPopupContainer.gc-validated span[style*="color: Red"],
#assignGroupPopupContainer.gc-validated span[style*="color:red"],
#assignGroupPopupContainer.gc-validated span[style*="color: red"] {
    display: inline !important;
}

/* ================================================================
   COMPETENCY MODULE
   Scoped resets and component styles for the React competency app
   ================================================================ */

#competency-root {
    font-family: var(--lms-font) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--lms-grey-800) !important;
    background: var(--lms-grey-50) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

    /* Reset LMS base styles bleeding in */
    #competency-root *,
    #competency-root *::before,
    #competency-root *::after {
        box-sizing: border-box !important;
        font-family: var(--lms-font) !important;
    }

    /* Typography scale */
    #competency-root h1 {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    #competency-root h2 {
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    #competency-root h3 {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    #competency-root p {
        font-size: 14px !important;
        margin: 0 !important;
        line-height: 1.5 !important;
    }

    /* Tailwind text size overrides — ensure correct sizing */
    #competency-root .text-xs {
        font-size: 11px !important;
    }

    #competency-root .text-sm {
        font-size: 13px !important;
    }

    #competency-root .text-base {
        font-size: 15px !important;
    }

    #competency-root .text-lg {
        font-size: 17px !important;
    }

    #competency-root .text-xl {
        font-size: 19px !important;
    }

    #competency-root .text-2xl {
        font-size: 22px !important;
    }

    /* Reset LMS anchor styles inside the app */
    #competency-root a {
        color: inherit !important;
        text-decoration: none !important;
        background: transparent !important;
    }

        #competency-root a:hover {
            color: inherit !important;
            text-decoration: none !important;
        }

    /* Reset LMS button/input styles */
    #competency-root button,
    #competency-root input,
    #competency-root select,
    #competency-root textarea {
        font-family: var(--lms-font) !important;
        font-size: 13px !important;
        line-height: normal !important;
        margin: 0 !important;
    }

    /* Reset LMS list styles */
    #competency-root ul,
    #competency-root ol {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Reset LMS table styles */
    #competency-root table {
        border-collapse: collapse !important;
        width: auto !important;
    }

    /* Reset LMS image styles */
    #competency-root img {
        max-width: 100% !important;
        border: none !important;
    }

    /* Ensure flex and grid work correctly */
    #competency-root .flex {
        display: flex !important;
    }

    #competency-root .grid {
        display: grid !important;
    }

    #competency-root .hidden {
        display: none !important;
    }

    /* Max width containers — full width when embedded */
    #competency-root .max-w-3xl,
    #competency-root .max-w-4xl,
    #competency-root .max-w-5xl {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Padding */
    #competency-root .p-6 {
        padding: 20px !important;
    }

    #competency-root .px-6 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #competency-root .py-6 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }



/* ================================================================
   COMPETENCY MODULE — CARD & LAYOUT FIXES
   ================================================================ */

    /* Explicit card appearance */
    #competency-root .rounded-xl {
        border-radius: 10px !important;
    }

    /* bg-white must survive LMS body background override */
    #competency-root .bg-white {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* Page/app background */
    #competency-root,
    #competency-root main {
        background: var(--lms-grey-50) !important;
    }

    /* Ensure transition works on cards */
    #competency-root .transition-all {
        transition: all 0.15s ease !important;
    }


    /* Force grey page background so white cards are visible */
    #competency-root > div,
    #competency-root .min-h-screen {
        background: var(--lms-grey-50) !important;
        background-color: var(--lms-grey-50) !important;
    }


    /* Fix select/option text visibility — LMS theme sets white text globally */
    #competency-root select,
    #competency-root select option {
        color: #333333 !important;
        background-color: #ffffff !important;
    }