/* =====================================================================================================
   Enjaz design system — loaded after Bootstrap 5.3 RTL (lib/bootstrap-5.3.3/css/bootstrap.rtl.min.css).
   1. Tokens   2. Base   3. App frame (topbar / sidebar / content / footer)   4. Components
   5. Legacy markup restyled as Bootstrap 5 components (Artisteer blocks, BS3 panels, ribbons, popups)
   6. Bootstrap 3/4 compatibility for class names still used in markup
   New markup: use Bootstrap 5 classes + the ej-* components below. No inline style="" / Font-* attributes.
   ===================================================================================================== */

/* ---------- 1. Tokens ---------- */
@font-face { font-family: "Bahij"; src: url("../HorizonUI/new_theme/new_fonts/ArbFONTS-Bahij_TheSansArabic-Plain.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bahij"; src: url("../HorizonUI/new_theme/new_fonts/BahijTheSansArabic-SemiBold.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bahij"; src: url("../HorizonUI/new_theme/new_fonts/Bahij_TheSansArabic-Bold.ttf"); font-weight: 700; font-display: swap; }   /* bold (fw-bold, <b>, th): without a 700 face browsers picked the Black file */

:root {
    /* colours come from the active App_Themes/<theme>/style.css (:root --main-*), so the user's colour theme still applies */
    --ej-primary: var(--main-green-color, #094d90);
    --ej-primary-rgb: var(--main-green-rgb, 9, 77, 144);   /* theme colour as "r, g, b" (Bootstrap utilities + the fallbacks below) */
    /* plain fallbacks first: browsers without color-mix() (Chrome/Edge < 111, e.g. Chrome 109 = last on Windows 7/8.1/
       Server 2012) would otherwise make these invalid => transparent hover backgrounds behind white text */
    --ej-primary-dark: var(--main-green-dark, #073e73);
    --ej-primary-soft: rgba(var(--ej-primary-rgb), .08);
    --ej-primary-tint: rgba(var(--ej-primary-rgb), .15);
    --ej-header: var(--main-menu-header-backgeound-color, #094d90);
    --ej-header-text: #ffffff;
    --ej-ribbon: var(--main-ribbon, #454c48);
    --ej-sidebar-bg: #ffffff;
    --ej-sidebar-text: #54667e;
    --ej-sidebar-active-bg: var(--ej-primary-soft);
    --ej-surface: #ffffff;
    --ej-page-bg: #ececec;
    --ej-border: #dde3ea;
    --ej-muted: #76838f;
    --ej-grid-header-bg: #b9c6d5;   /* legacy .xxx header colour */
    --ej-grid-alt-bg: var(--table-back-color, #f8f8f8);
    --ej-topbar-height: 56px;
    --ej-sidebar-width: 250px;
    --ej-radius: .5rem;
    --ej-font: "Bahij", "Segoe UI", Tahoma, Arial, sans-serif;

    /* forms (section 7) */
    --ej-field-height: 38px;
    --ej-field-wide-max: 28rem;   /* one size for "long" fields (were 400–560px fixed widths; 450 most common) */
    --ej-field-radius: .375rem;
    --ej-field-border: #ced4da;
    --ej-label-color: #344054;
    --ej-danger: #dc3545;

    /* z-index scale - one place for every layer (lowest to highest) */
    --ej-z-footer: 1010;
    --ej-z-sidebar: 1020;
    --ej-z-topbar: 1030;
    --ej-z-window: 1060;      /* ej:Window popups */
    --ej-z-modal: 10001;      /* AjaxControlToolkit ModalPopup (the toolkit sets 10000/10001 inline, up to 100001 for popups shown on load) */
    --ej-z-frame: 100020;     /* page popups (EjModal, window.open in an iframe) - may be opened from a ModalPopup; +2 per stacked popup */
    --ej-z-dropdown: 100500;  /* select2 dropdowns: above windows and modal popups they open from */
    /* postback loading overlay: css/postback-loading.css (100000100) stays on top of everything */

    /* hand the tokens to Bootstrap so every component picks them up */
    --bs-primary: var(--ej-primary);
    --bs-primary-rgb: var(--ej-primary-rgb);
    --bs-link-color: var(--ej-primary);
    --bs-link-color-rgb: var(--ej-primary-rgb);
    --bs-link-hover-color: var(--ej-primary-dark);
    --bs-body-font-family: var(--ej-font);
    --bs-body-bg: var(--ej-page-bg);
    --bs-border-color: var(--ej-border);
    --bs-border-radius: var(--ej-radius);
    --bs-link-hover-color-rgb: var(--ej-primary-rgb);   /* Bootstrap 5.3 links hover via this rgb triple */
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --ej-primary-dark: color-mix(in srgb, var(--ej-primary) 80%, #000);
        --ej-primary-soft: color-mix(in srgb, var(--ej-primary) 8%, transparent);
        --ej-primary-tint: color-mix(in srgb, var(--ej-primary) 15%, transparent);
    }
}

/* ---------- 2. Base ---------- */
body { font-family: var(--ej-font); background: var(--ej-page-bg); font-size: .95rem; }
/* Buttons are plain Bootstrap 5: .btn + btn-primary (save/add/next/search...) | btn-outline-primary (other actions) |
   btn-outline-danger (delete/reject) | btn-outline-secondary (cancel/back/close). js/enjaz.js gives legacy buttons these
   classes; the theme's own button rules skip these pages (App_Themes/<theme>/style.css, :where(html:not(.ej-app))).
   The one override: "primary" is the active colour theme instead of Bootstrap blue. */
.btn-primary { --bs-btn-bg: var(--ej-primary); --bs-btn-border-color: var(--ej-primary); --bs-btn-hover-bg: var(--ej-primary-dark); --bs-btn-hover-border-color: var(--ej-primary-dark); --bs-btn-active-bg: var(--ej-primary-dark); --bs-btn-active-border-color: var(--ej-primary-dark); --bs-btn-disabled-bg: var(--ej-primary); --bs-btn-disabled-border-color: var(--ej-primary); --bs-btn-focus-shadow-rgb: var(--ej-primary-rgb); }
.btn-outline-primary { --bs-btn-color: var(--ej-primary); --bs-btn-border-color: var(--ej-primary); --bs-btn-hover-bg: var(--ej-primary); --bs-btn-hover-border-color: var(--ej-primary); --bs-btn-active-bg: var(--ej-primary-dark); --bs-btn-active-border-color: var(--ej-primary-dark); --bs-btn-disabled-color: var(--ej-primary); --bs-btn-disabled-border-color: var(--ej-primary); --bs-btn-focus-shadow-rgb: var(--ej-primary-rgb); }
/* Button states = Bootstrap's own variables. HorizonUI/admin/css/style.css (loaded first) colours .btn-primary/-success/-danger...
   on :focus / :active:focus / :active:hover (purple #ab8ce4 after a click); html.ej-app (0,3,1) beats its 0,3,0 selectors. */
html.ej-app .btn:is(:focus, .focus) { color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); }
html.ej-app .btn:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }
html.ej-app .btn:focus-visible { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); box-shadow: var(--bs-btn-focus-box-shadow); }
html.ej-app .btn:is(:active, .active) { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); }
html.ej-app .btn:is(:disabled, .disabled) { color: var(--bs-btn-disabled-color); background-color: var(--bs-btn-disabled-bg); border-color: var(--bs-btn-disabled-border-color); }
.text-primary { color: var(--ej-primary) !important; }
.bg-primary { background-color: var(--ej-primary) !important; }

/* ---------- 3. App frame ---------- */
.ej-topbar {
    position: fixed; inset-inline: 0; top: 0; z-index: var(--ej-z-topbar); height: var(--ej-topbar-height);
    display: flex; align-items: center; gap: .75rem; padding-inline: .75rem;
    background: var(--ej-header); color: var(--ej-header-text); box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.ej-topbar a, .ej-topbar .btn-link { color: var(--ej-header-text); text-decoration: none; }
.ej-topbar .ej-logo img { height: 40px; }
.ej-topbar .ej-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ej-topbar .ej-breadcrumb { opacity: .85; font-weight: 400; }
.ej-topbar .ej-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.ej-topbar .ej-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0; color: inherit; }
.ej-topbar .ej-icon-btn:hover, .ej-topbar .ej-icon-btn:focus-visible { background: rgba(255,255,255,.15); }
.ej-topbar .ej-icon-btn .badge { position: absolute; top: 2px; inset-inline-end: 0; font-size: .65rem; }
.ej-topbar .ej-lang { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.35); border-radius: var(--ej-radius); padding: .2rem .4rem; }
.ej-topbar .ej-lang option { color: #000; }
.ej-topbar .dropdown-menu { max-height: 70vh; overflow-y: auto; min-width: 18rem; }
.ej-topbar .dropdown-menu a { color: var(--bs-body-color); }
.ej-sidebar-toggle { display: inline-flex; }
.ej-themes { display: flex; align-items: center; gap: .3rem; }
.ej-theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); object-fit: cover; }

.ej-sidebar {
    position: fixed; top: var(--ej-topbar-height); bottom: 0; inset-inline-start: 0; z-index: var(--ej-z-sidebar);
    width: var(--ej-sidebar-width); overflow-y: auto; background: var(--ej-sidebar-bg);
    border-inline-end: 1px solid var(--ej-border); transition: transform .2s ease;
}
.ej-content { margin-inline-start: var(--ej-sidebar-width); padding: calc(var(--ej-topbar-height) + 2rem) 1rem 3.5rem; min-height: 100vh; background: var(--ej-page-bg); transition: margin .2s ease; position: relative; }   /* positioned like the old #page-wrapper: content uses position:absolute + % widths */
body.ej-sidebar-collapsed .ej-sidebar { transform: translateX(100%); }   /* RTL: sidebar is on the right */
[dir=ltr] body.ej-sidebar-collapsed .ej-sidebar { transform: translateX(-100%); }
body.ej-sidebar-collapsed .ej-content { margin-inline-start: 0; }
@media (max-width: 991.98px) {
    .ej-sidebar { transform: translateX(100%); box-shadow: 0 0 20px rgba(0,0,0,.2); }
    [dir=ltr] .ej-sidebar { transform: translateX(-100%); }
    body.ej-sidebar-open .ej-sidebar { transform: none; }
    .ej-content { margin-inline-start: 0; }
    .ej-topbar .ej-hide-sm { display: none !important; }
}

/* public pages (design/SSubMasterPage.master): no sidebar */
.ej-public .ej-content { margin-inline-start: 0; max-width: 1200px; margin-inline: auto; }
.ej-public .ej-footer { inset-inline-start: 0; }
body.ej-public { background-color: var(--ej-page-bg) !important; }   /* the theme forces body white (* body {... !important}) */

/* side menu (markup built by design/DefaultMenu.ascx.cs: ul#side-menu > li > a + ul.nav-second-level) */
#side-menu { display: block; list-style: none; margin: 0; padding: .5rem 0; border: 0; }   /* menu builder emits class="nav": undo BS5 flex row */
#side-menu > li > a i, #side-menu > li > a .fa { width: 1.4rem; text-align: center; color: var(--ej-primary); font-size: 1.1rem; }
#side-menu li { list-style: none; }
#side-menu > li > a, #side-menu .nav-second-level a {
    display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; color: var(--ej-sidebar-text); text-decoration: none; border: 0; border-inline-start: 3px solid transparent;
}
#side-menu > li > a:hover, #side-menu .nav-second-level a:hover, #side-menu a.ej-active { background: var(--ej-sidebar-active-bg); color: var(--ej-primary); border-inline-start-color: var(--ej-primary); }
#side-menu > li > a .hide-menu { flex: 1; }
#side-menu > li.has-children > a::after { content: "\f104"; font-family: FontAwesome; opacity: .55; transition: transform .2s; }   /* fa-angle-left (RTL: points into the menu) */
#side-menu > li.ej-open > a::after { transform: rotate(-90deg); }
#side-menu .nav-second-level { display: none; padding: 0 0 .25rem; margin: 0; background: rgba(0,0,0,.03); }
#side-menu .nav-second-level a { padding-inline-start: 2.25rem; font-size: .9rem; }
#side-menu li.ej-open > .nav-second-level { display: block; }

.ej-footer {
    position: fixed; bottom: 0; inset-inline-end: 0; inset-inline-start: var(--ej-sidebar-width); z-index: var(--ej-z-footer);
    display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 1rem; font-size: .8rem; color: var(--ej-muted);
    background: var(--ej-surface); border-top: 1px solid var(--ej-border); transition: inset .2s ease;
}
body.ej-sidebar-collapsed .ej-footer { inset-inline-start: 0; }
@media (max-width: 991.98px) { .ej-footer { inset-inline-start: 0; } }

/* ---------- 4. Components ---------- */
.ej-page-header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.ej-page-header h1, .ej-page-header .ej-page-title { font-size: 1.35rem; font-weight: 600; margin: 0; color: var(--ej-primary-dark); }
.ej-page-header .ej-page-actions { margin-inline-start: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
/* list toolbar (search fields, page size, actions): wraps on narrow screens, .ej-grow fields share the free width */
.ej-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.ej-toolbar > .ej-grow { flex: 1 1 14rem; min-width: 0; }
.ej-toolbar > .ej-end { margin-inline-start: auto; }

.ej-card, .card { border: 1px solid var(--ej-border); border-radius: var(--ej-radius); box-shadow: 0 1px 2px rgba(16,24,40,.05); margin-bottom: 1rem; background: var(--ej-surface); }
.card-header { background: var(--ej-surface); font-weight: 600; color: var(--ej-primary-dark); }

/* data grids (asp:GridView via App_Themes skin -> CssClass="table ej-grid") */
.ej-grid { --bs-table-bg: var(--ej-surface); width: 100%; margin-bottom: .5rem; font-size: .9rem; vertical-align: middle; }
.ej-grid > thead > tr > th, .ej-grid > tbody > tr > th, .ej-grid tr.ej-grid-header > th, .ej-grid tr.ej-grid-header > td {
    background: var(--ej-grid-header-bg); color: #1d2733; font-weight: 700; white-space: nowrap; border-bottom-width: 1px;
}
.ej-grid > tbody > tr.ej-grid-alt > td { background: var(--ej-grid-alt-bg); }
.ej-grid th a, .ej-grid tr.ej-grid-header a { background: transparent !important; color: inherit !important; text-decoration: none; }   /* sortable headers: theme styles "th a" with a white box */
.ej-grid > tbody > tr:hover > td { background: var(--ej-primary-soft); }
.ej-grid > tbody > tr.ej-grid-selected > td { background: var(--ej-primary-tint); }
/* row colours set by the inbox code-behinds (row.BackColor: LightBlue = the row opened in the preview, LightGray = a state
   flag of the manager inboxes) sit on the <tr> and were hidden by the cell backgrounds */
.ej-grid > tbody > tr[style*="background-color:LightBlue"] > td { background: var(--ej-primary-tint); }
.ej-grid > tbody > tr:is([style*="background-color:LightGrey"], [style*="background-color:LightGray"]) > td { background: #eceff3; }
.ej-grid tr.ej-grid-pager td { background: var(--ej-surface); }
.ej-grid tr.ej-grid-pager table { margin: .25rem auto; }
.ej-grid tr.ej-grid-pager td td { border: 0; padding: 0 .15rem; }
.ej-grid tr.ej-grid-pager a, .ej-grid tr.ej-grid-pager span { display: inline-block; min-width: 2rem; padding: .2rem .45rem; border-radius: .35rem; text-align: center; }
.ej-grid tr.ej-grid-pager span { background: var(--ej-primary); color: #fff; }
.ej-grid-wrap { overflow-x: auto; }
/* inbox list + preview side by side (<td id="letter" style="width:50%">): fixed layout keeps the preview at its 50%, the grid scrolls in its half */
.ej-content table:has(> tbody > tr > td[id$="_letter"], > tbody > tr > td[id*="_letter_"]) { table-layout: fixed; }

.ej-form-row { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: .5rem 1rem; align-items: center; margin-bottom: .75rem; }
@media (max-width: 575.98px) { .ej-form-row { grid-template-columns: 1fr; } }

/* text utilities that replaced the per-control Font-Size / ForeColor attributes (scale = the sizes the pages used) */
.ej-text-xs { font-size: 11px !important; }
.ej-text-sm { font-size: 14px !important; }
.ej-text-md { font-size: 16px !important; }
.ej-text-lg { font-size: 18px !important; }
.ej-text-xl { font-size: 20px !important; }
.ej-text-2xl { font-size: 26px !important; }
.ej-text-3xl { font-size: 30px !important; }
.ej-text-danger { color: #d32f2f !important; }
.ej-text-accent { color: #e65100 !important; }
.ej-text-success { color: #2e7d32 !important; }

/* grid cells coloured from Importance.Color (<td bgcolor='<%# Eval("Color") %>'>, 128 cells in 86 controls) => pill badge in that colour */
.ej-grid table:has(td[bgcolor]) { width: auto !important; margin-inline: auto; border-collapse: separate; border-spacing: 0; background: transparent !important; }
.ej-grid table td[bgcolor] { border: 0 !important; border-radius: 999px; padding: .2rem .75rem !important; font-size: .8rem; font-weight: 600; text-align: center; white-space: nowrap; line-height: 1.5; }
.ej-grid table td[bgcolor] * { color: #fff !important; font-size: inherit !important; }
.ej-badge-importance { display: inline-block; min-width: 4.5rem; padding: .2rem .5rem; border-radius: 999px; color: #fff; font-size: .8rem; text-align: center; }

/* Enjaz server controls that replaced Telerik (App_Code/EnjazControls.cs) */
.ej-window { display: none; position: fixed; inset: 0; z-index: var(--ej-z-window); background: rgba(0,0,0,.45); align-items: center; justify-content: center; padding: 1rem; }
.ej-window.show { display: flex; }
.ej-window-dialog { background: var(--ej-surface); border-radius: var(--ej-radius); box-shadow: 0 12px 40px rgba(0,0,0,.3); max-width: 100%; max-height: calc(100vh - 2rem); overflow: auto; }
.ej-window-title { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-bottom: 1px solid var(--ej-border); font-weight: 600; color: var(--ej-primary-dark); }
.ej-window-body { padding: 1rem; }
.ej-tabstrip { margin-bottom: 1rem; }
.ej-tabstrip .nav-tabs { padding-inline-start: 0; border-bottom-color: var(--ej-border); }
.ej-tabstrip .nav-link { color: var(--ej-sidebar-text); }
.ej-tabstrip .nav-link.active { color: var(--ej-primary); background: transparent; border-color: transparent transparent var(--ej-primary); border-bottom-width: 3px; }
.ej-row-clickable { cursor: pointer; }
.ej-pdfviewer { border: 0; width: 100%; min-height: 80vh; background: #525659; }
.ej-combo-all { display: inline-block; margin-top: .2rem; }
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { min-height: 36px; border-color: #ced4da; border-radius: var(--ej-radius); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection { border-color: var(--ej-primary); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--ej-primary); }
.select2-container { min-width: 8rem; }

/* ---------- 5. Legacy markup restyled as components ---------- */
/* Artisteer "block" (≈265 uses): 9 decorative corner divs + header + content  =>  card */
.art-block { position: relative; margin: 0 0 1rem; border: 1px solid var(--ej-border); border-radius: var(--ej-radius); background: var(--ej-surface); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.art-block-tl, .art-block-tr, .art-block-bl, .art-block-br, .art-block-tc, .art-block-bc, .art-block-cl, .art-block-cr, .art-block-cc { display: none; }
.art-block-body { position: relative; padding: 0; }
.art-blockheader { position: relative; height: auto; margin: 0; padding: .65rem 1rem; border-bottom: 1px solid var(--ej-border); }
.art-blockheader .l, .art-blockheader .r { display: none; }
.art-blockheader h3.t, .art-blockheader .t { position: static; height: auto; margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ej-primary-dark); }
.art-blockheader h3.t a { color: inherit; font-size: inherit; }
.art-blockcontent, .art-blockcontent-body { position: relative; padding: 0; }
.art-blockcontent-body { padding: 1rem; color: var(--bs-body-color); font-size: inherit; }
.art-blockcontent-body a { font-size: inherit; }
.art-blockcontent-body a.btn:is(:link, :visited, [href], :not([href])) { color: var(--bs-btn-color); }   /* the theme's block link colours (a:link, a:visited) beat .btn-* */
.art-blockcontent-body a.btn:hover { color: var(--bs-btn-hover-color); }
.art-button2, .art-button { display: inline-block; }
.cleared { clear: both; display: block; height: 0; overflow: hidden; }

/* Bootstrap 3 panels (≈164 uses) => card */
.panel { border: 1px solid var(--ej-border); border-radius: var(--ej-radius); background: var(--ej-surface); margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.panel-heading { padding: .65rem 1rem; border-bottom: 1px solid var(--ej-border); font-weight: 600; color: var(--ej-primary-dark); }
.panel-title { font-size: 1.05rem; margin: 0; }
.panel-body { padding: 1rem; }
.panel-body::after, .panel::after, .art-blockcontent-body::after, .white-box::after { content: ""; display: table; clear: both; }   /* BS3 clearfix: panels must contain floated form content */
.ej-content :is(.customized-ribbon, .ej-page-header) { clear: both; }   /* a section header after floated BS3 columns (.form-group.col-md-12) collapsed beside them */
.panel-footer { padding: .65rem 1rem; border-top: 1px solid var(--ej-border); background: #fafbfc; }

/* grid row/header classes from the old theme */
.xxx { background-color: var(--ej-grid-header-bg); color: #1d2733; }
.yyy { background-color: var(--ej-grid-alt-bg); }
td.xxx, td.yyy { padding: .35rem .6rem; }   /* label / value cells of the detail popups */

/* ribbons used as section titles (≈149 uses) */
.customized-ribbon { position: relative; float: right; min-width: 160px; margin: .5rem 0 1rem; padding: .35rem 1rem; color: #fff; border-radius: var(--ej-radius) 0 0 var(--ej-radius); background: var(--ej-ribbon); }
.ribbon-info { background: var(--ej-ribbon); }
.margin-top-0 { margin-top: 0 !important; }

/* AjaxControlToolkit modal popups */
.modalBackground { background-color: #000; opacity: .55; }
/* ModalPopupExtenders without BackgroundCssClass (most of them) left the page undimmed: the toolkit's backdrop element */
div[id$="_backgroundElement"]:not(.modalBackground) { background-color: rgba(16, 24, 40, .5); }
.modalPopup { background: var(--ej-surface); border: 0; border-radius: var(--ej-radius); padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 95vw; }
.modalPopup .header { margin: -1rem -1rem 1rem; padding: .75rem 1rem; border-radius: var(--ej-radius) var(--ej-radius) 0 0; background: var(--ej-primary); color: #fff; font-size: 1.15rem; text-align: center; }
.modalPopup .body { font-size: 1rem; text-align: center; }
.modalPopup .footer, .modalPopup .ej-popup-actions { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.modalPopup.ej-popup-lg { width: min(60rem, 95vw); max-height: 90vh; overflow-y: auto; }   /* form popups (e.g. inbox actions) */
.modalPopup.ej-popup-sm { width: min(32rem, 95vw); }   /* one field + buttons (e.g. comment on a letter) */

/* postback loading overlay (css/postback-loading.css keeps its own rules) */

/* ---------- 6. Bootstrap 3/4 compatibility ---------- */
[class*="col-"] { position: relative; }   /* BS4 columns were positioned: theme ribbons (.ribbon-right, top:-25px) anchor to them */
.row > :not([class*="col"], object, iframe, embed) { flex: 0 1 auto; width: auto; max-width: none; padding-left: 0; padding-right: 0; margin-top: 0; }   /* BS5 forces every .row child to 100% width; BS4 sized non-column children (e.g. dashboard LinkButton cards) by content */
.list-inline > li { display: inline-block; padding-inline: 5px; }
ol, ul { padding-inline-start: 40px; }
hr { opacity: 1; border-top-color: rgba(0,0,0,.1); }   /* BS5 draws hr at 25% opacity (theme login underline turned pale) */   /* BS5 reboot uses 2rem; BS4 kept the browser default the pages were laid out with */
.top-panel .p2-profile .ico { color: #fff; }
/* Dashboard profile strip: themes cap .top-panel at 170px but give its blocks height:250px, so the overflow lay over the tabs below and ate their clicks */
/* (prefixed with .ej-content: App_Themes/<theme>/style.css is injected after this file) */
.ej-content .top-panel { max-height: none; }
.ej-content .top-panel .p1-profile, .ej-content .top-panel .p2-profile { height: auto; }
.ej-content .top-panel .p2-profile .cont { height: auto; }
.ej-topbar .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.6); --bs-btn-hover-color: var(--ej-header); --bs-btn-hover-bg: #fff; }
.btn-default { --bs-btn-color: #333; --bs-btn-bg: #fff; --bs-btn-border-color: #ced4da; --bs-btn-hover-color: #333; --bs-btn-hover-bg: #f1f3f5; --bs-btn-hover-border-color: #adb5bd; --bs-btn-active-bg: #e9ecef; }
.btn-block { display: block; width: 100%; }
.btn-xs { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .75rem; }
.form-group { margin-bottom: 1rem; }
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.input-group-append, .input-group-prepend { display: flex; }
.custom-select { display: block; width: 100%; padding: .375rem 2.25rem .375rem .75rem; border: 1px solid var(--ej-border); border-radius: var(--ej-radius); }
/* The old masters used the bootstrap-v4-rtl fork, which MIRRORS physical names in RTL (text-right = end = left in Arabic,
   ml-* = margin on the start side, ...). Pages were laid out against that, so these map to logical start/end:
   identical to the fork in RTL, identical to stock Bootstrap 4 in LTR (English pages). */
.text-right { text-align: end !important; }
.text-left { text-align: start !important; }
.float-right, .pull-right { float: right !important; }
.float-left, .pull-left { float: left !important; }
[dir=rtl] .float-right, [dir=rtl] .pull-right { float: left !important; }
[dir=rtl] .float-left, [dir=rtl] .pull-left { float: right !important; }
.ml-auto { margin-inline-start: auto !important; } .mr-auto { margin-inline-end: auto !important; }
.ml-0 { margin-inline-start: 0 !important; } .ml-1 { margin-inline-start: .25rem !important; } .ml-2 { margin-inline-start: .5rem !important; } .ml-3 { margin-inline-start: 1rem !important; } .ml-4 { margin-inline-start: 1.5rem !important; } .ml-5 { margin-inline-start: 3rem !important; }
.mr-0 { margin-inline-end: 0 !important; } .mr-1 { margin-inline-end: .25rem !important; } .mr-2 { margin-inline-end: .5rem !important; } .mr-3 { margin-inline-end: 1rem !important; } .mr-4 { margin-inline-end: 1.5rem !important; } .mr-5 { margin-inline-end: 3rem !important; }
.pl-0 { padding-inline-start: 0 !important; } .pl-1 { padding-inline-start: .25rem !important; } .pl-2 { padding-inline-start: .5rem !important; } .pl-3 { padding-inline-start: 1rem !important; } .pl-4 { padding-inline-start: 1.5rem !important; } .pl-5 { padding-inline-start: 3rem !important; }
.pr-0 { padding-inline-end: 0 !important; } .pr-1 { padding-inline-end: .25rem !important; } .pr-2 { padding-inline-end: .5rem !important; } .pr-3 { padding-inline-end: 1rem !important; } .pr-4 { padding-inline-end: 1.5rem !important; } .pr-5 { padding-inline-end: 3rem !important; }
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.badge-primary { background-color: var(--ej-primary); color: #fff; } .badge-secondary { background-color: var(--bs-secondary); color: #fff; }
.badge-success { background-color: var(--bs-success); color: #fff; } .badge-danger { background-color: var(--bs-danger); color: #fff; }
.badge-warning { background-color: var(--bs-warning); color: #000; } .badge-info { background-color: var(--bs-info); color: #000; }
.badge-pill { border-radius: 50rem; }
.label-info, .label-warning, .label-danger, .label-success { display: inline-block; padding: .2em .55em; border-radius: .35rem; font-size: .8em; color: #fff; }
.label-info { background: var(--bs-info); color: #000; } .label-warning { background: var(--bs-warning); color: #000; } .label-danger { background: var(--bs-danger); } .label-success { background: var(--bs-success); }
.close { background: transparent; border: 0; font-size: 1.5rem; line-height: 1; opacity: .5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.img-responsive { max-width: 100%; height: auto; }
.hide, .hidden { display: none !important; }
@media (max-width: 575.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .hidden-sm { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hidden-md { display: none !important; } }
@media (min-width: 992px) { .hidden-lg { display: none !important; } }

/* ---------- 7. Forms: title, breadcrumb, fields, labels, buttons, spacing ----------
   Legacy forms are tables of "label cell + field cell" with theme-styled controls (App_Themes/<theme>/style.css and
   HorizonUI/abdul*.css force pill shapes with !important and load after this file). Everything here is scoped to the
   content area (:is(.ej-content, .modalPopup)) and uses !important only where those legacy rules do.
   js/enjaz.js initForms() adds the classes: btn + one Bootstrap variant (from the button text, see section 2),
   ej-form-table / ej-label-cell (label cells), and the breadcrumb. New markup: plain Bootstrap 5 (.form-control,
   .form-select, .btn btn-primary, .row g-3 ...) looks the same. */

/* page title (the old floating "ribbon", ≈160 uses) => section header with an accent bar */
.ej-content .customized-ribbon, .ej-content .ribbon-right {
    position: static; float: none; display: flex; align-items: center; gap: .6rem;
    width: auto; min-width: 0; margin: 0 0 1.25rem !important; padding: 0 0 .75rem;
    background: transparent; color: var(--ej-primary-dark); border-radius: 0;
    border-bottom: 1px solid var(--ej-border); font-size: 1.25rem; font-weight: 600 !important; line-height: 1.4;
}   /* !important: margin beats mb-*/mt-* utilities in the markup, font-weight the theme's .ribbon-right rule */
.ej-content .customized-ribbon::before { content: ""; flex: 0 0 4px; align-self: stretch; min-height: 1.4em; border-radius: 2px; background: var(--ej-primary); }
.ej-content .customized-ribbon * { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
/* bare legacy page headings (<h1>/<h2>, Bootstrap 2.5/2rem light) => the same section header */
.ej-content :is(h1, h2):not(.ej-page-header *) {
    display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; padding: 0 0 .75rem;
    border-bottom: 1px solid var(--ej-border); font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.4; color: var(--ej-primary-dark);
}   /* !important: App_Themes/<theme>/style.css forces h1/h2 sizes with !important */
.ej-content :is(h1, h2):not(.ej-page-header *)::before { content: ""; flex: 0 0 4px; align-self: stretch; min-height: 1.4em; border-radius: 2px; background: var(--ej-primary); }
.ej-content :is(h1, h2) + hr { display: none; }   /* old markup drew its own rule under the title */
.ej-content .ej-empty-heading { display: none !important; }   /* <h2>&nbsp;</h2> spacers (enjaz.js) */
/* app pages: the page body is shown once js/enjaz.js has prepared the legacy forms (html.ej-ready), in its final look -
   before, label cells / select2 / spacing changed after the first paint. Fallback: visible after 1.5 s without the script. */
html.ej-app:not(.ej-ready) .ej-page-body { visibility: hidden; animation: ej-reveal 0s linear 1.5s forwards; }
@keyframes ej-reveal { to { visibility: visible; } }
/* pages without any card: the page body itself becomes the card (CSS only - a script-added class showed after the first paint) */
.ej-page-body:not(:has(.panel, .card, .white-box, .art-block, .ej-card)) { border: 1px solid var(--ej-border); border-radius: var(--ej-radius); background: var(--ej-surface); box-shadow: 0 1px 2px rgba(16,24,40,.05); padding: 1.25rem 1.5rem; }
.ej-page-body:not(:has(.panel, .card, .white-box, .art-block, .ej-card))::after { content: ""; display: table; clear: both; }

/* login page (no ej-app: the theme turns every submit into a thin outline) - the sign-in button is the page's one action */
html:not(.ej-app) input.ButtonFirstLogin { background-color: var(--main-green-color, #094d90) !important; border-color: var(--main-green-color, #094d90) !important; color: #fff !important; border-radius: .5rem; padding: .55rem 1rem !important; font-weight: 600; }
html:not(.ej-app) input.ButtonFirstLogin:is(:hover, :focus) { background-color: var(--main-green-dark, #073e73) !important; color: #fff !important; }

/* AjaxControlToolkit Accordion of the Details* screens (الشروحات): the classes it names were never defined */
.headerCssClass, .headerSelectedCss { padding: .5rem .75rem; margin-top: .25rem; background: var(--ej-primary-tint); border: 1px solid var(--ej-border); border-radius: var(--ej-radius); font-weight: 600; cursor: pointer; }
.headerSelectedCss { background: var(--ej-primary); color: #fff; border-color: var(--ej-primary); border-end-start-radius: 0; border-end-end-radius: 0; }
.contentCssClass { padding: .75rem; border: 1px solid var(--ej-border); border-top: 0; border-radius: 0 0 var(--ej-radius) var(--ej-radius); background: var(--ej-surface); }

/* check box lists (roles, departments): keep each label on one line */
.ej-content table[id*=chkl] td, .ej-content table[id*=CheckBoxList] td { white-space: nowrap; }

/* fieldset captions: Bootstrap 5 floats <legend> at 1.5rem - legacy fieldsets want a normal caption on the border */
.ej-content legend { float: none; width: auto; font-size: 1rem; font-weight: 600; padding-inline: .4rem; margin-bottom: .5rem; }

/* breadcrumb (Bootstrap component, built from the active side-menu item) */
.ej-breadcrumb-nav .breadcrumb { margin: 0 0 .75rem; font-size: .85rem; --bs-breadcrumb-divider-color: var(--ej-muted); --bs-breadcrumb-item-active-color: var(--ej-muted); }
.ej-breadcrumb-nav a { text-decoration: none; }
.ej-breadcrumb-nav .fa { margin-inline-end: .3rem; }

/* fields => Bootstrap .form-control / .form-select look */
:is(.ej-content, .modalPopup) :is(input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel],
    input[type=search], input[type=date], input[type=time], input[type=datetime-local], input[type=url], input:not([type])):not(.select2-search__field),
:is(.ej-content, .modalPopup) textarea,
:is(.ej-content, .modalPopup) select:not([multiple]) {
    background-color: #fff !important; color: var(--bs-body-color) !important; font-weight: 400 !important; font-family: inherit;
    border: 1px solid var(--ej-field-border) !important; border-radius: var(--ej-field-radius) !important;
    padding: .375rem 5px !important; font-size: .95rem; line-height: 1.5; max-width: 100%;   /* 5px sides: legacy fields have fixed pixel widths sized for the theme's padding */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
:is(.ej-content, .modalPopup) :is(input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel],
    input[type=search], input[type=date], input[type=time], input[type=datetime-local], input[type=url], input:not([type])):not(.select2-search__field),
:is(.ej-content, .modalPopup) select:not([multiple]):not(.select2-hidden-accessible) { height: var(--ej-field-height) !important; }
:is(.ej-content, .modalPopup) select:not([multiple]) { padding-inline-end: 1.75rem !important; }
:is(.ej-content, .modalPopup) textarea { min-height: 5.5rem; height: auto; padding-inline: .5rem !important; }
:is(.ej-content, .modalPopup) :is(input, textarea, select):focus { border-color: var(--ej-primary) !important; box-shadow: 0 0 0 .2rem var(--ej-primary-tint) !important; outline: 0; }
:is(.ej-content, .modalPopup) :is(input, textarea, select):is([disabled], [readonly]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]) { background-color: #e9ecef !important; }
:is(.ej-content, .modalPopup) :is(input, textarea)::placeholder { color: #98a2b3; opacity: 1; }
:is(.ej-content, .modalPopup) input[type=checkbox], :is(.ej-content, .modalPopup) input[type=radio] { width: 1.05em; height: 1.05em; vertical-align: middle; accent-color: var(--ej-primary); margin-inline-end: .3rem; }
:is(.ej-content, .modalPopup) :is(input[type=checkbox], input[type=radio]) + label { margin-inline-end: .75rem; }

/* select2 (ej:ComboBox / .chzn-select): same box as the fields (abdul.rtl.css strips its border with !important) */
.ej-content .select2-container--default .select2-selection { border: 1px solid var(--ej-field-border) !important; border-radius: var(--ej-field-radius) !important; background: #fff; min-height: var(--ej-field-height); }
.ej-content .select2-container--default .select2-selection__rendered { border-bottom: 0 !important; }
.ej-content .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--ej-field-height) - 2px); }
.ej-content .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--ej-field-height) - 2px); }
.ej-content .select2-container--default.select2-container--focus .select2-selection,
.ej-content .select2-container--default.select2-container--open .select2-selection { border-color: var(--ej-primary) !important; box-shadow: 0 0 0 .2rem var(--ej-primary-tint); }
.ej-content .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--ej-primary-soft); border-color: var(--ej-primary-tint); border-radius: .25rem; }
.select2-dropdown { z-index: var(--ej-z-dropdown); border-color: var(--ej-field-border); }

/* label cells + spacing of the legacy form tables */
table.ej-form-table { border-collapse: separate; border-spacing: 0 .4rem; }
table.ej-form-table > tbody > tr > td, table.ej-form-table > tr > td { vertical-align: middle; padding: .1rem .4rem; }
td.ej-label-cell { width: 1%; white-space: nowrap; color: var(--ej-label-color); font-weight: 600; padding-inline-end: 1rem !important; background: transparent !important; }
td.ej-label-cell :is(span, label, b, strong) { color: inherit; font-weight: inherit; }   /* one weight per label (enjaz.js drops fw-bold inside label cells) */
/* phones / narrow windows: every legacy form table becomes a single column (label above its field), like a Bootstrap
   .row g-3 form - no markup change. display:block is not !important, so rows hidden with inline display:none stay hidden. */
@media (max-width: 767.98px) {
    /* all layout tables (forms, side-by-side panels) stack; data grids keep their columns and scroll sideways */
    .ej-content :is(table, tbody, thead, tfoot, tr, td, th):not(.ej-grid, .ej-grid *, .ajax__calendar *, .ej-pdfsigner *) {
        display: block; width: 100% !important; height: auto !important;
    }
    .ej-content table:not(.ej-grid, .ej-grid *) { border-spacing: 0; }
    .ej-content .ej-grid { display: block; overflow-x: auto; }
    .ej-content [style*="width"]:not(.ej-grid *) { max-width: 100% !important; }   /* fixed widths (style / Width="") never exceed the screen */
    td.ej-label-cell { white-space: normal; padding: .6rem .25rem .15rem !important; }
    .ej-content fieldset { display: block; min-width: 0; max-width: 100%; }   /* fieldsets default to min-width: min-content */
    .ej-content .top-panel { flex-wrap: wrap; }                               /* dashboard profile strip */
}
td.ej-label-cell [style*="color:Red"], td.ej-label-cell [style*="color: red"], td.ej-label-cell .text-danger, td.ej-label-cell .ej-text-danger { color: var(--ej-danger) !important; }

/* buttons: Bootstrap .btn (section 2, js/enjaz.js styleButtons) */
/* section-header cells in legacy tables (were style="background-color:Gray") */
.ej-cell-head { background-color: var(--ej-grid-header-bg); color: #1d2733; font-weight: 600; }
.ej-cell-head a { color: inherit; }
/* long fields: one common width, shrinking only when the cell is narrower (select2 combos: the container that follows the hidden select).
   A fixed width, not 100%: legacy forms are auto-layout tables whose cells take their width from the fields. */
.ej-field-wide:not(.select2-hidden-accessible), select.ej-field-wide + .select2-container { width: var(--ej-field-wide-max) !important; max-width: 100% !important; }
/* medium fields (were 250–399px) and short fields - dates, numbers, years (were 60–130px) */
.ej-field-md:not(.select2-hidden-accessible), select.ej-field-md + .select2-container { width: 18rem !important; max-width: 100% !important; }
.ej-field-sm:not(.select2-hidden-accessible), select.ej-field-sm + .select2-container { width: 6.5rem !important; max-width: 100% !important; }
/* former <table cellpadding/cellspacing> attributes. :where() = zero specificity, like the presentational attributes they
   replace, so .ej-form-table / grid / theme rules keep winning exactly as before. Only this table's own cells (not nested ones). */
:where(table.ej-cs-0) { border-spacing: 0; }
:where(table.ej-cs-1) { border-spacing: 1px; }
:where(table.ej-cs-4) { border-spacing: 4px; }
:where(table.ej-cs-2) { border-spacing: 2px; }
:where(table.ej-cs-10) { border-spacing: 10px; }
:where(table.ej-cp-3 > tbody > tr > td, table.ej-cp-3 > tbody > tr > th, table.ej-cp-3 > tr > td) { padding: 3px; }
:where(table.ej-cp-5 > tbody > tr > td, table.ej-cp-5 > tbody > tr > th, table.ej-cp-5 > tr > td) { padding: 5px; }
:where(table.ej-cp-7 > tbody > tr > td, table.ej-cp-7 > tbody > tr > th, table.ej-cp-7 > tr > td) { padding: 7px; }
:where(table.ej-cp-0 > tbody > tr > td, table.ej-cp-0 > tbody > tr > th, table.ej-cp-0 > thead > tr > th, table.ej-cp-0 > tr > td) { padding: 0; }
:where(table.ej-cp-2 > tbody > tr > td, table.ej-cp-2 > tbody > tr > th, table.ej-cp-2 > thead > tr > th, table.ej-cp-2 > tr > td) { padding: 2px; }
.ej-pointer { cursor: pointer; }
/* colour field helpers (enjaz.js initColorInputs) */
input.ej-color-input { direction: ltr; text-align: right; }   /* "#c62828" must not render as "c62828#" */
.ej-swatch-preview { display: inline-block; width: 1.6rem; height: 1.6rem; margin-inline: .4rem; vertical-align: middle; border-radius: 50%; border: 1px solid var(--ej-border); }
.ej-swatches { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; }
.ej-swatch { display: inline-block; width: 1.4rem; height: 1.4rem; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--ej-border); cursor: pointer; }
.ej-swatch:hover, .ej-swatch:focus-visible { box-shadow: 0 0 0 2px var(--ej-primary); outline: 0; }
/* framed block (was style="border: 2px solid gray") */
.ej-box { border: 1px solid var(--ej-border); border-radius: var(--ej-radius); }
/* one horizontal / vertical gap instead of &nbsp;&nbsp;… and <br /><br />… runs in legacy markup */
.ej-gap { display: inline-block; width: .75rem; }
.ej-vgap { display: block; height: .75rem; }
/* replaces the obsolete <center> element: centres text and nested tables exactly like the UA rule for <center> */
.ej-center { display: block; text-align: -moz-center; text-align: -webkit-center; }
/* ---- page popups (EjModal in js/enjaz.js: window.open of a page of this site in an iframe) ---- */
.ej-frame-modal { position: fixed; inset: 0; z-index: var(--ej-z-frame); display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(16, 24, 40, .5); opacity: 0; transition: opacity .15s ease; }
.ej-frame-modal.show { opacity: 1; }
.ej-frame-dialog { display: flex; flex-direction: column; width: min(72rem, 96vw); height: min(52rem, 92vh); background: var(--ej-surface); border-radius: var(--ej-radius); box-shadow: 0 24px 64px rgba(0, 0, 0, .32); overflow: hidden; transform: translateY(8px) scale(.99); transition: transform .15s ease; }
.ej-frame-modal.show .ej-frame-dialog { transform: none; }
.ej-frame-dialog.ej-frame-full { width: 100%; height: 100%; max-width: none; }
.ej-frame-modal:has(.ej-frame-full) { padding: .5rem; }
.ej-frame-dialog.ej-frame-nudge { transform: scale(1.01); }
.ej-frame-head { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .35rem .5rem .35rem 1rem; padding-inline: 1rem .5rem; border-bottom: 1px solid var(--ej-border); background: var(--ej-primary); color: #fff; }
.ej-frame-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ej-frame-tools { flex: 0 0 auto; display: flex; gap: .25rem; }
.ej-frame-tool { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--ej-radius); background: transparent; color: inherit; font-size: 1.05rem; cursor: pointer; }
.ej-frame-tool:hover { background: rgba(255, 255, 255, .18); }
.ej-frame-tool:focus-visible { outline: 0; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.ej-frame-body { position: relative; flex: 1 1 auto; min-height: 0; background: var(--ej-page-bg); }
.ej-frame-iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ej-frame-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; color: var(--ej-primary); pointer-events: none; }
.ej-frame-slow { display: none; color: var(--ej-muted); font-size: .9rem; }
.ej-frame-waiting .ej-frame-slow { display: block; }
html.ej-frame-open, html.ej-frame-open body { overflow: hidden; }
@media (max-width: 767.98px) {
    .ej-frame-modal { padding: 0; }
    .ej-frame-dialog { width: 100% !important; height: 100% !important; border-radius: 0; }
}
@media print { .ej-frame-modal { display: none !important; } }

/* a page shown inside such a popup: no application frame (top bar, side menu, footer; the session timer stays with the application window) */
html.ej-embedded .ej-topbar, html.ej-embedded .ej-sidebar, html.ej-embedded .ej-footer, html.ej-embedded .ej-breadcrumb-nav { display: none !important; }
html.ej-embedded .ej-content { margin-inline-start: 0 !important; padding: 1rem; min-height: 0; }
html.ej-embedded body { padding-top: 0 !important; }