/* =====================================================================
   theme.css — shared design system
   Order of Lawyers in Tripoli – Lebanon (nl-bar)

   Same design system as the Order of Physicians site, with a bronze main
   color. To change the main color, edit --accent, --accent-dark,
   --accent-soft, --accent-soft-hover and --focus in section 1.

   Loaded AFTER style.min.css / rtl.min.css / custom.css in every master.
   Scope classes set by the master pages (the "lop" prefix is kept so that
   pages can be shared between the two sites):
     body.lop            every page
     body.lop-popup      pages on BlankPage.master (opened in RadWindow)
     .lop-content        wrapper around the MainContent placeholder
   Page-level building blocks all start with  .md-
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
    --ink: #2a2520;
    --muted: #756c60;
    --line: #e6e0d6;
    --soft: #f8f6f1;
    --accent: #84651d;
    --accent-dark: #6b5117;
    --accent-soft: #f7f0df;
    --accent-soft-hover: #eee2c4;
    --success: #1f7a4d;
    --success-soft: #e4f4ea;
    --warning: #a8500f;
    --warning-soft: #fdeee0;
    --danger: #b3261e;
    --danger-soft: #fbe9e7;
    --empty: #a39b90;
    --empty-soft: #f1eeea;
    --focus: #d1b46a;
    --radius: 10px;
    --radius-sm: 6px;
    --font: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;

    /* aliases used by the first redesigned pages */
    --ok: var(--success);
    --ok-soft: var(--success-soft);
    --off: var(--warning);
    --off-soft: var(--warning-soft);
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
body.lop {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--soft);
    direction: rtl;
}
body.lop h1, body.lop h2, body.lop h3, body.lop h4, body.lop h5, body.lop h6,
body.lop button, body.lop input, body.lop select, body.lop textarea, body.lop .btn {
    font-family: var(--font);
}
body.lop h1, body.lop h2, body.lop h3, body.lop h4, body.lop h5, body.lop h6 { color: var(--ink); }
body.lop ::selection { background: var(--accent-soft-hover); }

/* the old template adds a 45px gap and a thick grey bar around #content */
body.lop #content {
    padding-top: 6px;
    border-bottom: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    min-height: 60vh;
}
body.lop .lop-content { min-height: 60vh; }

/* Telerik controls pick up the site font (icon fonts are left alone) */
body.lop .RadGrid, body.lop .RadGrid .rgMasterTable, body.lop .RadGrid .rgDetailTable,
body.lop .RadGrid .rgHeader, body.lop .RadGrid .rgFilterBox, body.lop .RadGrid .rgPager,
body.lop .RadGrid .rgCommandRow, body.lop .RadGrid .rgGroupPanel,
body.lop .RadComboBox, body.lop .RadComboBox .rcbInput,
body.lop .RadComboBoxDropDown, body.lop .RadComboBoxDropDown .rcbItem, body.lop .RadComboBoxDropDown .rcbHovered,
body.lop .RadDropDownList, body.lop .rddlPopup,
body.lop .RadInput, body.lop .RadInput .riTextBox, body.lop .riTextBox,
body.lop .RadPicker, body.lop .RadCalendar, body.lop .RadCalendar .rcTitle,
body.lop .RadTabStrip, body.lop .RadTabStrip .rtsLink,
body.lop .RadWindow, body.lop .RadWindow .rwTitle,
body.lop .RadButton, body.lop .RadButton .rbText,
body.lop .RadListBox, body.lop .RadTreeView, body.lop .RadMenu, body.lop .RadUpload, body.lop .RadAsyncUpload {
    font-family: var(--font) !important;
}

/* ---------------------------------------------------------------------
   3. Top bar: current user, change password, logout
   --------------------------------------------------------------------- */
body.lop #top-nav {
    background: var(--ink);
    border: 0;
    min-height: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
}
body.lop #top-nav > .container { padding-top: 6px; padding-bottom: 6px; }
body.lop #top-nav > .container:empty { padding: 3px 0; }

.lop-userbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 6px 8px; direction: rtl;
}
.lop-user-name { order: 1; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #fff; }
.lop-user-name::before {
    content: "\f007"; font-family: FontAwesome; font-size: 13px;
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14); color: #fff;
}
.lop-user-pwd { order: 2; }
.lop-logout { order: 3; }

body.lop #top-nav .lop-userbar input[type="submit"],
body.lop #top-nav .lop-userbar a.lop-logout {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto; min-height: 28px; margin: 0;
    padding: 3px 12px; border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .28) !important;
    background: transparent !important; background-image: none !important;
    color: #fff !important;
    font-size: 13px; font-weight: 500; line-height: 1.5;
    text-decoration: none; text-shadow: none; box-shadow: none; -webkit-box-shadow: none;
    cursor: pointer; white-space: nowrap;
}
body.lop #top-nav .lop-userbar input[type="submit"]:hover,
body.lop #top-nav .lop-userbar input[type="submit"]:focus,
body.lop #top-nav .lop-userbar a.lop-logout:hover,
body.lop #top-nav .lop-userbar a.lop-logout:focus {
    background: rgba(255, 255, 255, .14) !important; color: #fff !important;
}
body.lop #top-nav .lop-userbar a.lop-logout { border-color: rgba(255, 255, 255, .5) !important; }
body.lop #top-nav .lop-userbar a.lop-logout::before {
    content: "\f08b"; font-family: FontAwesome; margin-left: 6px; display: inline-block; transform: scaleX(-1);
}
/* the user name is a disabled button: show it as plain text */
body.lop #top-nav .lop-user-name input[type="submit"],
body.lop #top-nav .lop-user-name input[type="submit"][disabled],
body.lop #top-nav .lop-user-name input[type="submit"]:hover {
    border-color: transparent !important; background: transparent !important;
    padding: 3px 2px; font-weight: 700; font-size: 14px;
    unicode-bidi: plaintext;
}
body.lop #top-nav .lop-user-name input[type="submit"][disabled] { cursor: default; pointer-events: none; }
body.lop #top-nav .lop-userbar input:focus-visible,
body.lop #top-nav .lop-userbar a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   4. Main navigation
   --------------------------------------------------------------------- */
body.lop #main-nav {
    background: #fff;
    border: 0; border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(42, 37, 32, .05);
    -webkit-box-shadow: 0 2px 10px rgba(42, 37, 32, .05);
    min-height: 56px;
}
body.lop #main-nav .navbar-brand { height: 56px; }
body.lop #main-nav .navbar-nav > li > a {
    padding: 18px 12px;
    font-size: 14px; font-weight: 700; line-height: 20px;
    color: var(--ink);
    background: transparent;
    box-shadow: none; -webkit-box-shadow: none;
    border: 0; border-bottom: 3px solid transparent;
    margin-right: 0;
    padding-bottom: 15px;
}
body.lop #main-nav .navbar-nav > li > a .caret { border-top-color: var(--muted); margin-right: 3px; }
body.lop #main-nav .navbar-nav > li > a:hover,
body.lop #main-nav .navbar-nav > li > a:focus {
    color: var(--accent); background: var(--soft);
    border-color: transparent;
    box-shadow: none; -webkit-box-shadow: none;
}
body.lop #main-nav .navbar-nav > li.dropdown:hover > a,
body.lop #main-nav .navbar-nav > li.open > a,
body.lop #main-nav .navbar-nav > li.open > a:hover,
body.lop #main-nav .navbar-nav > li.open > a:focus {
    color: var(--accent); background: var(--accent-soft);
    border-color: transparent; border-bottom-color: var(--accent);
    box-shadow: none; -webkit-box-shadow: none;
}
body.lop #main-nav .navbar-nav > li.active > a,
body.lop #main-nav .navbar-nav > li.active > a:hover,
body.lop #main-nav .navbar-nav > li.active > a:focus {
    color: var(--accent); background: transparent;
    border-color: transparent;
    box-shadow: none; -webkit-box-shadow: none;
}
body.lop #main-nav .navbar-nav > li.active > a .fa-home { font-size: 18px; }
body.lop #main-nav .navbar-nav > li > a:hover .caret,
body.lop #main-nav .navbar-nav > li.dropdown:hover > a .caret,
body.lop #main-nav .navbar-nav > li.open > a .caret { border-top-color: var(--accent); }
body.lop #main-nav .navbar-nav > li > a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* dropdowns */
body.lop #main-nav .dropdown-menu {
    min-width: 220px; padding: 6px;
    border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
    background: #fff;
    box-shadow: 0 14px 30px rgba(42, 37, 32, .14);
    -webkit-box-shadow: 0 14px 30px rgba(42, 37, 32, .14);
    text-align: right; font-size: 14px;
    max-height: calc(100vh - 140px); overflow-y: auto;
}
body.lop #main-nav .dropdown-menu > li > a {
    display: block; padding: 8px 12px; border-radius: var(--radius-sm);
    color: var(--ink); font-weight: 500; line-height: 1.5; white-space: nowrap;
    background: transparent;
}
body.lop #main-nav .dropdown-menu > li > a:hover,
body.lop #main-nav .dropdown-menu > li > a:focus {
    background: var(--accent-soft); color: var(--accent); text-decoration: none;
}
body.lop #main-nav .navbar-toggle { border-color: var(--line); background: #fff; }
body.lop #main-nav .navbar-toggle .icon-bar { background: var(--ink); }
body.lop #main-nav .navbar-toggle:hover { background: var(--accent-soft); border-color: var(--line); }
body.lop #main-nav .navbar-toggle:hover .icon-bar { background: var(--accent); }

@media (min-width: 992px) {
    /* long menus (15 links or more) flow into two columns */
    body.lop #main-nav .dropdown-menu:has(> li:nth-child(15)) { column-count: 2; column-gap: 6px; min-width: 440px; }
    body.lop #main-nav .dropdown-menu > li { break-inside: avoid; -webkit-column-break-inside: avoid; }
    /* a menu that would leave the screen opens on the other side (class set by the master page script) */
    body.lop #main-nav .navbar-nav > li > .dropdown-menu.lop-dd-flip { right: auto; left: 0; }
}
@media (max-width: 991px) {
    body.lop #main-nav .navbar-nav > li > a { padding: 12px 15px; border-bottom: 0; }
    body.lop #main-nav .navbar-nav .open .dropdown-menu {
        border: 0; box-shadow: none; -webkit-box-shadow: none; background: var(--soft);
        max-height: none; border-radius: var(--radius-sm); margin: 0 10px 8px;
    }
    body.lop #main-nav .navbar-nav .open .dropdown-menu > li > a { color: var(--ink); padding: 8px 14px; white-space: normal; }
    body.lop #main-nav .navbar-collapse { border-top: 1px solid var(--line); box-shadow: none; }
}

/* ---------------------------------------------------------------------
   5. Footer (copyright bar)
   --------------------------------------------------------------------- */
body.lop footer { background: transparent; }
body.lop #footer-bottom {
    background: var(--ink); color: #d9d2c6; text-shadow: none;
    padding: 14px 0; font-size: 12px; margin-top: 30px;
}
body.lop #footer-bottom p { color: #d9d2c6; line-height: 1.7; }
body.lop #footer-bottom strong, body.lop #footer-bottom span { color: #f1ece3; }
body.lop #footer-bottom ul li a { color: #d9d2c6; }
body.lop #footer-bottom ul li a:hover { color: #fff; }

/* A full page shown inside a pop-up window (class set by the master page):
   no site menu, user bar or footer, and no empty space at the top. */
html.lop-embedded body.lop > form > header,
html.lop-embedded body.lop > footer { display: none !important; }
html.lop-embedded body.lop #content { padding-top: 0; min-height: 0; }
html.lop-embedded body.lop .lop-content { min-height: 0; }
html.lop-embedded body.lop { background: #fff; }

/* ---------------------------------------------------------------------
   6. Defaults inside the content area for pages not redesigned yet.
      :where() keeps specificity low on purpose, so Telerik skins and
      page-level classes always win.
   --------------------------------------------------------------------- */
:where(.lop-content, body.lop-popup) a { color: var(--accent); }
:where(.lop-content, body.lop-popup) a:hover,
:where(.lop-content, body.lop-popup) a:focus { color: var(--accent-dark); }

:where(.lop-content, body.lop-popup) input[type="submit"],
:where(.lop-content, body.lop-popup) input[type="button"],
:where(.lop-content, body.lop-popup) input[type="reset"],
:where(.lop-content, body.lop-popup) button,
:where(.lop-content, body.lop-popup) .btn-primary {
    background-color: var(--accent); border-color: var(--accent); color: #fff;
    border-radius: var(--radius-sm); font-weight: 600; text-shadow: none;
}
:where(.lop-content, body.lop-popup) input[type="submit"]:hover,
:where(.lop-content, body.lop-popup) input[type="submit"]:focus,
:where(.lop-content, body.lop-popup) input[type="button"]:hover,
:where(.lop-content, body.lop-popup) input[type="button"]:focus,
:where(.lop-content, body.lop-popup) input[type="reset"]:hover,
:where(.lop-content, body.lop-popup) button:hover,
:where(.lop-content, body.lop-popup) button:focus,
:where(.lop-content, body.lop-popup) .btn-primary:hover {
    background-color: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
}

:where(.lop-content, body.lop-popup) input[type="text"],
:where(.lop-content, body.lop-popup) input[type="password"],
:where(.lop-content, body.lop-popup) input[type="email"],
:where(.lop-content, body.lop-popup) input[type="number"],
:where(.lop-content, body.lop-popup) input[type="tel"],
:where(.lop-content, body.lop-popup) input[type="date"],
:where(.lop-content, body.lop-popup) textarea,
:where(.lop-content, body.lop-popup) select {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--ink); background-color: #fff;
}
:where(.lop-content, body.lop-popup) input[type="text"]:focus,
:where(.lop-content, body.lop-popup) input[type="password"]:focus,
:where(.lop-content, body.lop-popup) input[type="email"]:focus,
:where(.lop-content, body.lop-popup) input[type="number"]:focus,
:where(.lop-content, body.lop-popup) textarea:focus,
:where(.lop-content, body.lop-popup) select:focus {
    border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 0;
}

/* popup pages: lighter frame than the full pages */
body.lop-popup { background: var(--soft); }
body.lop-popup #content { padding-top: 12px; min-height: 0; }
body.lop-popup #content > .container { width: auto; max-width: 1140px; }

/* ---------------------------------------------------------------------
   7. Telerik RadGrid
   --------------------------------------------------------------------- */
:is(.lop-content, body.lop-popup, .md) .RadGrid {
    border: 1px solid var(--line) !important; border-radius: var(--radius);
    background: #fff; overflow-x: auto; overflow-y: hidden; max-width: 100%;
}
/* a grid that shows an edit form (inline or pop-up) must not clip it */
:is(.lop-content, body.lop-popup, .md) .RadGrid:has(.rgEditForm) { overflow: visible; }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgMasterTable { border: 0; }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgCommandRow > td,
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgCommandCell {
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 14px;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgHeader,
:is(.lop-content, body.lop-popup, .md) .RadGrid th.rgHeader {
    background: var(--soft); color: var(--muted); font-weight: 600; font-size: 13px;
    border-bottom: 1px solid var(--line); border-left: 0; border-right: 0;
    padding: 10px 8px; text-align: center;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgHeader a { color: var(--muted); }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgHeader a:hover { color: var(--accent); }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgFilterRow > td {
    background: #fff; padding: 6px; border-bottom: 1px solid var(--line);
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgFilterRow input.rgFilterBox {
    min-width: 50px; height: auto; margin: 0; padding: 4px 8px;
    border: 1px solid var(--line); border-radius: 5px; font-size: 13px;
    background: #fff; color: var(--ink); box-shadow: none;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgFilterRow input.rgFilterBox:focus {
    border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 0;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgRow > td,
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgAltRow > td {
    padding: 8px; border-bottom: 1px solid var(--line); border-left: 0; border-right: 0;
    vertical-align: middle; font-size: 14px; color: var(--ink);
}
/* backgrounds are set on the row (not the cells) so row colours set from code stay visible */
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgRow { background-color: #fff; }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgAltRow { background-color: #fdfcfa; }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgRow:hover,
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgAltRow:hover,
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgHoveredRow { background-color: #faf5e9; }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgSelectedRow,
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgSelectedRow > td {
    background-color: var(--accent-soft-hover) !important; color: var(--ink) !important;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgFooter > td {
    background: var(--soft); border-top: 1px solid var(--line); font-weight: 700; padding: 9px 8px;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgNoRecords > td {
    padding: 28px 16px; text-align: center; color: var(--muted);
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgEditRow > td,
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgEditForm { background: var(--soft); }

/* pager */
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgPager > td {
    background: var(--soft); border-top: 1px solid var(--line); padding: 8px 12px; color: var(--muted); font-size: 13px;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgPager .rgNumPart a {
    min-width: 30px; border-radius: var(--radius-sm); text-align: center; text-decoration: none;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgPager .rgNumPart a.rgCurrentPage,
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgPager .rgNumPart a.rgCurrentPage:hover {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgPager .rgNumPart a.rgCurrentPage span { color: #fff !important; }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgPager .rgInfoPart { color: var(--muted); }
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgPager .riTextBox,
:is(.lop-content, body.lop-popup, .md) .RadGrid .rgPager .rcbInput { direction: ltr; text-align: center; }

/* ---------------------------------------------------------------------
   8. Telerik RadTabStrip: pills. Add class "md-steps" on a parent to
      number the tabs (1, 2, 3 ...) as in RegisterLawyersDocuments.
   --------------------------------------------------------------------- */
:is(.lop-content, body.lop-popup, .md) .RadTabStrip { margin-bottom: 14px; }
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 { border: 0 !important; background: none !important; padding: 0; }
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsUL { display: flex; flex-wrap: wrap; gap: 8px; float: none; list-style: none; margin: 0; padding: 0; }
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsLI { background: none !important; border: 0 !important; float: none; margin: 0; padding: 0; list-style: none; }
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsLink {
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 9px 18px !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
    background: #fff !important; color: var(--ink) !important;
    font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none !important; cursor: pointer;
}
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsLink:hover { background: var(--soft) !important; }
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsOut,
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsIn,
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsTxt { background: none !important; padding: 0 !important; color: inherit !important; }
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsSelected > .rtsLink,
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsLink.rtsSelected,
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsLink.rtsSelected:hover {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsDisabled > .rtsLink,
:is(.lop-content, body.lop-popup, .md) .RadTabStrip .rtsLevel1 .rtsLink.rtsDisabled {
    color: #bdb5a8 !important; background: var(--soft) !important; cursor: not-allowed;
}
.md-steps .RadTabStrip .rtsUL { counter-reset: md-step; }
.md-steps .RadTabStrip .rtsLI { counter-increment: md-step; }
.md-steps .RadTabStrip .rtsTxt::before {
    content: counter(md-step);
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; margin-left: 8px; font-size: 12px;
    background: rgba(0, 0, 0, .08);
}

/* ---------------------------------------------------------------------
   9. Page wrapper and header
   --------------------------------------------------------------------- */
.md {
    direction: rtl; text-align: right; color: var(--ink);
    margin: 20px 0 40px; font-size: 14px;
}
.md *, .md *::before, .md *::after { box-sizing: border-box; }
.md.md-narrow { max-width: 1100px; margin-left: auto; margin-right: auto; }

.md-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-right: 6px solid var(--accent);
    border-radius: var(--radius); padding: 18px 22px; margin-bottom: 14px;
}
.md-head-text { flex: 1; min-width: 240px; }
.md-head h1, .md-head h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--ink); line-height: 1.4; }
.md-head p { margin: 0; color: var(--muted); font-size: 13px; }
.md-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------------
   10. Cards, sections, accordion
   --------------------------------------------------------------------- */
.md-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 20px; margin-bottom: 14px;
}
.md-card.is-flush { padding: 0; overflow: hidden; }
.md-card-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 18px; background: var(--soft); border-bottom: 1px solid var(--line);
}
.md-card-title { flex: 1; font-size: 15px; font-weight: 700; margin: 0; color: var(--ink); }
.md-card-title small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.md-card-body { padding: 16px 18px; }

.md-sub { font-size: 13px; font-weight: 700; color: var(--accent); margin: 16px 0 8px; }
.md-sub:first-child { margin-top: 0; }

/* numbered step badge (popup steps) */
.md-num-badge {
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.md-ico {
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    background: var(--accent-soft); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.md-ico.is-round { width: 50px; height: 50px; border-radius: 50%; }
.md-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-ico.is-round svg { width: 24px; height: 24px; }

/* accordion: <details class="md-acc"><summary>…</summary><div class="md-acc-body">…</div></details> */
details.md-acc {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 14px; overflow: hidden;
}
details.md-acc > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; font-size: 16px; font-weight: 700; color: var(--ink);
}
details.md-acc > summary::-webkit-details-marker { display: none; }
details.md-acc > summary::after {
    content: ""; margin-right: auto; width: 9px; height: 9px; flex-shrink: 0;
    border-left: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg); transition: transform .15s;
}
details.md-acc[open] > summary { background: var(--soft); border-bottom: 1px solid var(--line); }
details.md-acc[open] > summary::after { transform: rotate(135deg); }
details.md-acc > summary:hover { background: var(--soft); }
details.md-acc > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
details.md-acc > summary small { font-size: 12px; font-weight: 400; color: var(--muted); }
.md-acc-body { padding: 16px 18px; }

/* client-side tabs (DoctorView pattern) */
.md-tabs {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
    background: #fff; border: 1px solid var(--line); border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0; padding: 0 8px;
}
.md .md-tab, .md .md-tab:focus, .md .md-tab:active {
    flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 8px;
    padding: 14px 16px 12px; margin: 0 0 -1px;
    background: transparent !important; color: var(--muted) !important;
    border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0;
    font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: none !important;
}
.md .md-tab:hover { color: var(--ink) !important; background: var(--soft) !important; }
.md .md-tab[aria-selected="true"],
.md .md-tab[aria-selected="true"]:hover,
.md .md-tab[aria-selected="true"]:focus {
    color: var(--accent) !important; background: var(--accent-soft) !important;
    border-bottom-color: var(--accent) !important;
}
.md .md-tab:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: -3px; }
.md-panels {
    background: #fff; border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius); padding: 20px;
}
.md-panel[hidden] { display: none; }

/* ---------------------------------------------------------------------
   11. Buttons
       Strong selectors + !important: the old template paints every
       button orange/white and Telerik skins restyle inputs, so the
       visible state must not depend on source order.
   --------------------------------------------------------------------- */
.md-btn, a.md-btn, input.md-btn, button.md-btn,
.md .md-btn, .md a.md-btn, .md input.md-btn, .md button.md-btn,
.md-bar input.md-btn, .md-bar a.md-btn, .md-bar button.md-btn {
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff !important; background-image: none !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    align-items: center; justify-content: center; gap: 6px;
    padding: 6px 12px; min-height: 32px; height: auto; width: auto; margin: 0;
    font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 1.4;
    text-decoration: none !important; text-shadow: none !important; white-space: nowrap;
    box-shadow: none !important; -webkit-box-shadow: none !important; transform: none !important;
    cursor: pointer; vertical-align: middle;
}
/* display is forced too, except when a button is hidden on purpose */
a.md-btn:not([hidden]):not([style*="display:none"]):not([style*="display: none"]),
button.md-btn:not([hidden]):not([style*="display:none"]):not([style*="display: none"]) { display: inline-flex !important; }
input.md-btn:not([hidden]):not([style*="display:none"]):not([style*="display: none"]) { display: inline-block !important; }

.md-btn:hover, a.md-btn:hover, input.md-btn:hover, button.md-btn:hover,
.md-btn:focus, a.md-btn:focus, input.md-btn:focus, button.md-btn:focus,
.md .md-btn:hover, .md a.md-btn:hover, .md input.md-btn:hover, .md button.md-btn:hover,
.md-bar input.md-btn:hover, .md-bar a.md-btn:hover, .md-bar button.md-btn:hover {
    background: var(--soft) !important; color: var(--ink) !important; border-color: #d9d0c0 !important;
}

.md-btn.md-btn-primary, a.md-btn.md-btn-primary, input.md-btn.md-btn-primary, button.md-btn.md-btn-primary,
.md .md-btn.md-btn-primary, .md a.md-btn.md-btn-primary, .md input.md-btn.md-btn-primary, .md button.md-btn.md-btn-primary,
.md-bar input.md-btn.md-btn-primary, .md-bar a.md-btn.md-btn-primary, .md-bar button.md-btn.md-btn-primary {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
.md-btn.md-btn-primary:hover, a.md-btn.md-btn-primary:hover, input.md-btn.md-btn-primary:hover, button.md-btn.md-btn-primary:hover,
.md-btn.md-btn-primary:focus, a.md-btn.md-btn-primary:focus, input.md-btn.md-btn-primary:focus, button.md-btn.md-btn-primary:focus,
.md .md-btn.md-btn-primary:hover, .md a.md-btn.md-btn-primary:hover, .md input.md-btn.md-btn-primary:hover, .md button.md-btn.md-btn-primary:hover,
.md-bar input.md-btn.md-btn-primary:hover, .md-bar a.md-btn.md-btn-primary:hover, .md-bar button.md-btn.md-btn-primary:hover {
    background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; color: #fff !important;
}

.md-btn.md-btn-soft, a.md-btn.md-btn-soft, input.md-btn.md-btn-soft, button.md-btn.md-btn-soft,
.md .md-btn.md-btn-soft, .md a.md-btn.md-btn-soft, .md input.md-btn.md-btn-soft, .md button.md-btn.md-btn-soft,
.md-bar input.md-btn.md-btn-soft, .md-bar a.md-btn.md-btn-soft, .md-bar button.md-btn.md-btn-soft {
    background: var(--accent-soft) !important; border-color: transparent !important; color: var(--accent) !important;
}
.md-btn.md-btn-soft:hover, a.md-btn.md-btn-soft:hover, input.md-btn.md-btn-soft:hover, button.md-btn.md-btn-soft:hover,
.md-btn.md-btn-soft:focus, a.md-btn.md-btn-soft:focus, input.md-btn.md-btn-soft:focus, button.md-btn.md-btn-soft:focus,
.md .md-btn.md-btn-soft:hover, .md a.md-btn.md-btn-soft:hover, .md input.md-btn.md-btn-soft:hover, .md button.md-btn.md-btn-soft:hover,
.md-bar input.md-btn.md-btn-soft:hover, .md-bar a.md-btn.md-btn-soft:hover, .md-bar button.md-btn.md-btn-soft:hover {
    background: var(--accent-soft-hover) !important; border-color: transparent !important; color: var(--accent) !important;
}

.md-btn.md-btn-danger, a.md-btn.md-btn-danger, input.md-btn.md-btn-danger, button.md-btn.md-btn-danger,
.md .md-btn.md-btn-danger, .md a.md-btn.md-btn-danger, .md input.md-btn.md-btn-danger, .md button.md-btn.md-btn-danger,
.md-bar input.md-btn.md-btn-danger, .md-bar a.md-btn.md-btn-danger, .md-bar button.md-btn.md-btn-danger {
    background: #fff !important; border-color: #ecc4c0 !important; color: var(--danger) !important;
}
.md-btn.md-btn-danger:hover, a.md-btn.md-btn-danger:hover, input.md-btn.md-btn-danger:hover, button.md-btn.md-btn-danger:hover,
.md .md-btn.md-btn-danger:hover, .md a.md-btn.md-btn-danger:hover, .md input.md-btn.md-btn-danger:hover, .md button.md-btn.md-btn-danger:hover,
.md-bar input.md-btn.md-btn-danger:hover, .md-bar a.md-btn.md-btn-danger:hover, .md-bar button.md-btn.md-btn-danger:hover {
    background: var(--danger-soft) !important; border-color: #ecc4c0 !important; color: var(--danger) !important;
}

.md-btn.md-btn-lg, a.md-btn.md-btn-lg, input.md-btn.md-btn-lg, button.md-btn.md-btn-lg,
.md .md-btn.md-btn-lg, .md a.md-btn.md-btn-lg, .md input.md-btn.md-btn-lg, .md button.md-btn.md-btn-lg {
    padding: 9px 18px; font-size: 14px; font-weight: 600;
}
.md-btn.md-btn-sm, a.md-btn.md-btn-sm, input.md-btn.md-btn-sm, button.md-btn.md-btn-sm,
.md .md-btn.md-btn-sm, .md a.md-btn.md-btn-sm, .md input.md-btn.md-btn-sm, .md button.md-btn.md-btn-sm {
    padding: 3px 10px; min-height: 26px; font-size: 12px;
}

.md-btn[disabled], input.md-btn[disabled], button.md-btn[disabled], a.md-btn.aspNetDisabled,
.md .md-btn[disabled], .md input.md-btn[disabled], .md button.md-btn[disabled], .md a.md-btn.aspNetDisabled,
.md-bar input.md-btn[disabled], .md-bar button.md-btn[disabled] {
    opacity: .5 !important; cursor: not-allowed; pointer-events: none;
}
.md-btn:focus-visible, .md-search:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; }

/* Excel export: image button + label */
.md-export {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 5px 12px 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    font-size: 14px; font-weight: 600; color: var(--success);
}
.md-export:hover { background: var(--success-soft); }
.md-export input[type="image"] { width: 24px; height: 24px; border: 0; padding: 0; background: none; }

/* ---------------------------------------------------------------------
   12. Toolbars, search, forms
   --------------------------------------------------------------------- */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 2px; }
.md-toolbar.is-between { justify-content: space-between; }
.md-spacer { flex: 1; }
.md .md-search, input.md-search {
    width: 320px; max-width: 100%; height: auto; margin: 0;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 14px; background: #fff; color: var(--ink); box-shadow: none;
}
.md-hint { color: var(--muted); font-size: 12px; }

/* filter bar above a report grid */
.md-filters {
    display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 14px;
}
.md-filters .md-field { min-width: 180px; }

/* form grid: label above control */
.md-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; }
.md-form.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-form.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-field { min-width: 0; }
.md-field.is-wide { grid-column: 1 / -1; }
.md-label, .md-field > label {
    display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted);
}
.md-label .md-req, .md-req { color: var(--danger); margin-right: 2px; }
.md-field input[type="text"], .md-field input[type="password"], .md-field input[type="email"],
.md-field input[type="number"], .md-field input[type="tel"], .md-field input[type="date"],
.md-field select, .md-field textarea,
.md-input {
    width: 100%; max-width: 100%; height: auto; margin: 0;
    padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 14px; line-height: 1.5; background: #fff; color: var(--ink); box-shadow: none;
}
.md-field textarea { min-height: 84px; resize: vertical; }
.md-field input:focus, .md-field select:focus, .md-field textarea:focus, .md-input:focus {
    border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 0;
}
.md-field input[readonly], .md-field input[disabled], .md-field select[disabled], .md-field textarea[readonly] {
    background: var(--soft); color: var(--muted);
}
.md-field .RadComboBox, .md-field .RadPicker, .md-field .RadInput, .md-field .RadDropDownList { width: 100% !important; max-width: 100%; }
.md-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.md-check input[type="checkbox"], .md-check input[type="radio"] { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); }

/* validators and messages */
.md .errors, .md-error, .md span[style*="color:Red"], .md span[style*="color: Red"] {
    color: var(--danger) !important; font-size: 13px;
}
.md-error { display: block; margin-top: 4px; }
.md-alert {
    border: 1px solid var(--line); border-right: 4px solid var(--accent); border-radius: 8px;
    background: #fff; padding: 10px 14px; margin-bottom: 14px; font-size: 14px;
}
.md-alert:empty { display: none; }
.md-alert.is-ok { border-color: #b9dfc8; border-right-color: var(--success); background: var(--success-soft); color: var(--success); }
.md-alert.is-warn { border-color: #f2cfae; border-right-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
.md-alert.is-danger { border-color: #ecc4c0; border-right-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------------
   13. Read-only field grid and plain tables
   --------------------------------------------------------------------- */
.md-fields {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.md-fields > .md-item {
    background: #fff; padding: 10px 14px; min-height: 62px;
    margin: 0 0 -1px -1px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
}
.md-fields > .md-item.is-wide { grid-column: 1 / -1; }
.md-item-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.md-item-value { display: block; font-size: 15px; font-weight: 600; word-break: break-word; }
.md-item-value.is-empty { color: #bdb5a8; font-weight: 400; }

.md-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.md-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.md-table th {
    text-align: right; font-weight: 600; color: var(--muted); background: var(--soft);
    padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.md-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table tbody tr:hover td { background: #faf5e9; }

/* ---------------------------------------------------------------------
   14. Status pills and small helpers
   --------------------------------------------------------------------- */
.md-pill {
    display: inline-block; padding: 2px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.7; white-space: nowrap;
    background: var(--accent-soft); color: var(--accent);
}
.md-pill.is-on, .md-pill.is-paid, .md-pill.is-active { background: var(--success-soft); color: var(--success); }
.md-pill.is-off, .md-pill.is-unpaid, .md-pill.is-partial { background: var(--warning-soft); color: var(--warning); }
.md-pill.is-danger { background: var(--danger-soft); color: var(--danger); }
.md-pill.is-empty { background: var(--empty-soft); color: var(--empty); }
/* several pills in one grid cell (for example the specialties of a doctor) */
.md-pills { display: inline-block; }
.md-pills .md-pill { margin: 2px 1px; }
.md-badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px;
}
.md-badge:empty { display: none; }

/* numbers, phones, e-mails, IBANs: always left-to-right */
.md-ltr, .md .md-ltr { direction: ltr; text-align: right; unicode-bidi: plaintext; white-space: nowrap; }
td.md-ltr, .md td.md-ltr { text-align: right; }
.md-money, .md .md-money { direction: ltr; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-num, .md .md-num { font-weight: 700; color: var(--accent); text-align: center; direction: ltr; }
.md-name, .md .md-name { font-weight: 700; }
.md-en, .md .md-en { direction: ltr; text-align: right; color: var(--muted); font-size: 13px; }
.md-center, .md .md-center { text-align: center; white-space: nowrap; }
.md-actions, .md .md-actions { text-align: center; white-space: nowrap; }
.md .md-actions input[type="image"] { height: 22px; width: auto; vertical-align: middle; border: 0; padding: 0; background: none; }
.md .md-actions input[type="image"][disabled] { opacity: .35; cursor: not-allowed; }
.md-nowrap { white-space: nowrap; }
.md-muted { color: var(--muted); }
.md-empty { padding: 30px; text-align: center; color: var(--muted); }

.md-avatar {
    width: 46px; height: 46px; border-radius: 50%; overflow: hidden; margin: 0 auto;
    background: var(--accent-soft) no-repeat center / 24px 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b74' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}
.md-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------
   15. Popup pages (BlankPage.master inside RadWindow)
       <div class="md md-pop"> cards … </div>
       <div class="md-bar"> Save / Close buttons </div>
   --------------------------------------------------------------------- */
.md.md-pop { max-width: 1100px; margin: 0 auto; padding: 16px 16px 90px; }
.md-pop-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-right: 6px solid var(--accent);
    border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px;
}
.md-pop-head .md-head-text { min-width: 200px; }
.md-pop-title { font-size: 20px; font-weight: 700; line-height: 1.4; margin: 0; color: var(--ink); }
.md-pop-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.md-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    padding: 12px 16px; background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(42, 37, 32, .06);
    direction: rtl;
}
.md-bar input.md-btn, .md-bar a.md-btn, .md-bar button.md-btn {
    min-width: 120px; padding: 9px 22px; font-size: 15px;
}

/* ---------------------------------------------------------------------
   16. Small screens and print
   --------------------------------------------------------------------- */
@media (max-width: 700px) {
    .md { margin: 12px 0 30px; }
    .md-head, .md-pop-head, .md-card { padding: 14px; }
    .md .md-search, input.md-search { width: 100%; }
    .md-form, .md-form.is-2, .md-form.is-3 { grid-template-columns: 1fr; }
    .md-fields { grid-template-columns: 1fr 1fr; }
    .md-panels { padding: 14px; }
    .md-filters .md-field { min-width: 100%; }
    .md-bar input.md-btn, .md-bar a.md-btn, .md-bar button.md-btn { flex: 1; min-width: 0; }
    .lop-userbar { justify-content: flex-start; }
}
@media print {
    body.lop { background: #fff; }
    body.lop #top-nav, body.lop #main-nav, body.lop footer, .md-bar, .md-head-actions, .md-toolbar, .md-tabs { display: none !important; }
    .md-head, .md-pop-head { border-right-width: 1px; }
    .md-panel, .md-panel[hidden] { display: block !important; }
    details.md-acc > .md-acc-body { display: block; }
    :is(.lop-content, body.lop-popup, .md) .RadGrid { overflow: visible; }
}

/* ---------------------------------------------------------------------
   17. nl-bar: main menu on one row
   The lawyers site has more top-level menus than the physicians site
   (13 for the super admin). On desktop the logo and the menu share one
   row, the bar uses the full window width, and the entries tighten up
   as the window gets narrower. If they still do not fit, they wrap
   under the first row instead of pushing the logo onto its own line.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    body.lop #main-nav > .container {
        display: flex; flex-wrap: nowrap; align-items: center;
        width: auto; max-width: 1500px; padding-left: 16px; padding-right: 16px;
    }
    body.lop #main-nav > .container::before,
    body.lop #main-nav > .container::after { display: none; }
    body.lop #main-nav .navbar-header { float: none; flex: 0 0 auto; margin: 0; }
    body.lop #main-nav .navbar-brand { float: none; display: block; padding-top: 4px; padding-bottom: 4px; margin: 0; }
    body.lop #main-nav .navbar-brand > img { max-height: 48px; width: auto; }
    body.lop #main-nav .navbar-collapse {
        flex: 1 1 auto; min-width: 0; padding: 0; margin: 0;
        border: 0; box-shadow: none; -webkit-box-shadow: none;
    }
    body.lop #main-nav .navbar-nav {
        float: none !important; display: flex; flex-wrap: wrap; align-items: stretch;
        margin: 0; padding: 0;
    }
    body.lop #main-nav .navbar-nav > li { float: none; flex: 0 0 auto; }
    body.lop #main-nav .navbar-nav > li > a {
        white-space: nowrap;
        font-size: clamp(12.5px, 1.02vw, 14px);
        padding-left: clamp(5px, 0.62vw, 12px);
        padding-right: clamp(5px, 0.62vw, 12px);
    }
    body.lop #main-nav .navbar-nav > li > a .caret { margin-right: 2px; }
}

/* ---------------------------------------------------------------------
   18. nl-bar: side margins on popup pages (BlankPage.master)
   Popup pages put their content straight inside the Bootstrap container
   and row, which leaves it touching the window edges. Give every popup
   the same inner margin; pages built with .md-pop keep their own.
   --------------------------------------------------------------------- */
body.lop-popup #content { padding-top: 14px; padding-bottom: 18px; }
body.lop-popup #content > .container {
    -webkit-box-sizing: border-box; box-sizing: border-box;
    padding-left: 22px; padding-right: 22px;
}
body.lop-popup #content > .container > .row { margin-left: 0; margin-right: 0; }
body.lop-popup #content > .container > .row:has(> .md-pop) { margin-left: -22px; margin-right: -22px; }
@media (max-width: 560px) {
    body.lop-popup #content > .container { padding-left: 12px; padding-right: 12px; }
    body.lop-popup #content > .container > .row:has(> .md-pop) { margin-left: -12px; margin-right: -12px; }
}