@import url("https://milestone-docs.netlify.app/custom/css/main.css");

/*  custom styles   */

.topichead{
    cursor: pointer !important;
}

.theme1 .procedure > li::before {
    background-color: #023853 !important;
}

.bg-primary,.btn-primary,.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus,.site-sidebar,.portal-single-publication .publication-icon {
    background-color:#023853 !important;
}

.pager li>a, .pager li>span {
    color: #023853 !important;
}

.pager li>a:hover,.pager li>span:hover {
    background-color:#023853 !important;
    color: white !important;
} 

.site-sidebar .site-sidebar-header a {
    vertical-align: sub !important;
} 

.caution h3, .important h3, .note h3, .tip h3, .warning h3, .warning.danger {
    display: none;
}

#edit-btn{
    border-radius: 5px !important;
    padding: 6px 16px !important;
    background-color: #ccc !important;
    color: #222 !important;
}

td, th {
    padding: 10px 20px;
}

.nav-site-sidebar ul ul ul ul a {
    padding-left: 80px !important;
}

@media (min-width: 768px) {
    .theme1.page-toc main article {
        padding-left: 7%;
    }
}


/* =====================================================================
   APPENDED: zoomin-look.css
   ===================================================================== */

/* =====================================================================
   zoomin-look.css
   ---------------------------------------------------------------------
   Makes the Paligo/Netlify content area render like the Zoomin site.

   Reference pages used to derive every value in this file:
     Zoomin  https://doc.milestonesys.com/en-US/bundle/doc1036_rev3/page/
             content/husky/hy_ivo/hy_ivo_informationtag_modellabel.htm
     Paligo  https://milestone-docs.netlify.app/husky/
             milestone-husky-ivo-700r-revision-3/2026r1.test4/en/
             information-tag-and-model-label.html

   SCOPE: content area only (#topic-content). The site header, left TOC,
   search bar, breadcrumbs and right-hand "on this page" rail are left
   alone by design.

   HOW TO INSTALL
   --------------
   Paligo emits [link href="../css/layout-custom-style.css"] as the LAST
   of its own stylesheets, so that file is the intended override slot.
   Either:
     a) paste this into Paligo > Layout > CSS > Custom CSS, or
     b) append it to css/layout-custom-style.css in your build output.

   A few Paligo inline [style] blocks come after that link in the
   cascade, which is why nearly every rule here is scoped to
   #topic-content (ID specificity) rather than using !important.

   TUNING: change the custom properties in the :root block. Everything
   downstream reads from them.
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. Webfont
   Zoomin sets its content in Open Sans; Paligo ships Roboto.
   The @import itself was moved to the top of this file (must be the
   first rule, or every browser silently drops it). Delete it there if
   you self-host Open Sans or want to keep Roboto.
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   1. Design tokens (measured from the Zoomin page)
   --------------------------------------------------------------------- */
:root {
  /* Type */
  --zdc-font:            "Open Sans", -apple-system, BlinkMacSystemFont,
                         "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --zdc-font-mono:       Consolas, Monaco, "Andale Mono", monospace;
  --zdc-font-size:       16px;
  --zdc-line-height:     23px;   /* ~1.44 */

  /* Colour */
  --zdc-text:            #323E48;  /* body copy + most headings        */
  --zdc-title:           #000000;  /* topic title only                 */
  --zdc-link:            #0099DA;  /* Milestone blue                   */
  --zdc-link-hover:      #007CB0;
  --zdc-rule:            #C6CDCD;  /* table + hr borders               */

  /* Admonitions */
  --zdc-note-bg:         #D9E2F3;
  --zdc-note-accent:     #0099DA;
  --zdc-tip-bg:          #E2EFD9;
  --zdc-tip-accent:      #538135;
  /* .important confirmed against Zoomin's real "Install XProtect LPR"
     page: orange/peach, not purple. .caution/.warning were checked
     across four publications and never found in real content -- Milestone
     may simply not use them. Their values below are still a plausible
     guess (same visual family as the confirmed colours) in case content
     using them turns up later; treat them as unconfirmed. */
  --zdc-caution-bg:      #FDF3D9;
  --zdc-caution-accent:  #D9901A;
  --zdc-warning-bg:      #F9DEDE;
  --zdc-warning-accent:  #C0392B;
  --zdc-important-bg:    #FBE4D5;
  --zdc-important-accent:#C45911;

  --zdc-admon-pad:       14px 60px;
  --zdc-admon-margin:    24px 0;
  --zdc-admon-bar:       8px;

  /* Code */
  --zdc-code-bg:         #F1F1F1;
  --zdc-code-text:       #838486;
  --zdc-pre-bg:          #F2F2F2;

  /* Layout */
  --zdc-content-width:   847px;  /* Zoomin's measured content column  */

  /* Admonition icons -- swap the data: URI to use your own artwork.
     %23 is an escaped "#" for the fill colour. */
  --zdc-icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230099DA'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  --zdc-icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23538135'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");
  --zdc-icon-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D9901A'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
  --zdc-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C0392B'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
  --zdc-icon-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C45911'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------
   2. Content column
   --------------------------------------------------------------------- */
#topic-content {
  font-family: var(--zdc-font);
  font-size:   var(--zdc-font-size);
  line-height: var(--zdc-line-height);
  color:       var(--zdc-text);
  max-width:   var(--zdc-content-width);
}

/* Paligo sets Roboto on [body]; inherited elements inside the content
   area need to be pulled onto Open Sans explicitly. */
#topic-content,
#topic-content p,
#topic-content li,
#topic-content td,
#topic-content th,
#topic-content div,
#topic-content span,
#topic-content dt,
#topic-content dd,
#topic-content h1,
#topic-content h2,
#topic-content h3,
#topic-content h4,
#topic-content h5,
#topic-content h6 {
  font-family: var(--zdc-font);
}


/* ---------------------------------------------------------------------
   3. Headings

   Level mapping (Paligo -> Zoomin):
     h2.title  topic title   -> Zoomin h1   34 / 40  700  #000
     h3.title  section       -> Zoomin h2   28 / 34  600
     h4.title  subsection    -> Zoomin h3   20 / 24  500
     h5.title  sub-subsec    -> Zoomin h4   18 / 21.6 500
     h6.title                -> Zoomin h5   14 / 16.8 500

   Scoped through .titlepage so admonition titles (which are also
   h3.title, but sit directly inside .note / .tip) are not caught.
   --------------------------------------------------------------------- */
#topic-content .titlepage h2.title {
  font-size:     34px;
  line-height:   40px;
  font-weight:   700;
  color:         var(--zdc-title);
  margin:        0 0 24px;
  letter-spacing: normal;
}

#topic-content .titlepage h3.title {
  font-size:   28px;
  line-height: 34px;
  font-weight: 600;
  color:       var(--zdc-text);
  margin:      28px 0 14px;
}

#topic-content .titlepage h4.title {
  font-size:   20px;
  line-height: 24px;
  font-weight: 500;
  color:       var(--zdc-text);
  margin:      24px 0 6px;
}

#topic-content .titlepage h5.title {
  font-size:   18px;
  line-height: 21.6px;
  font-weight: 500;
  color:       var(--zdc-text);
  margin:      20px 0 6px;
}

#topic-content .titlepage h6.title {
  font-size:   14px;
  line-height: 16.8px;
  font-weight: 500;
  color:       var(--zdc-text);
  margin:      18px 0 6px;
}

/* The first heading in a topic should not push away from the breadcrumb. */
#topic-content > .section > .titlepage:first-child h2.title,
#topic-content > .titlepage:first-child h2.title {
  margin-top: 0;
}

/* Paligo's anchor-link icon that sits inside every heading. Zoomin shows
   its equivalent only on hover -- match that. */
#topic-content .titlepage .header-link {
  opacity: 0;
  transition: opacity .15s ease-in-out;
  color: var(--zdc-link);
  text-decoration: none;
}
#topic-content .titlepage .title:hover .header-link {
  opacity: 1;
}


/* ---------------------------------------------------------------------
   4. Body copy, links, inline markup
   --------------------------------------------------------------------- */
#topic-content p {
  font-size:   var(--zdc-font-size);
  line-height: var(--zdc-line-height);
  font-weight: 400;
  color:       var(--zdc-text);
  margin:      0 0 16px;
}

#topic-content a:not(.header-link) {
  color: var(--zdc-link);
  text-decoration: none;
  border-bottom: 0;
}
#topic-content a:not(.header-link):hover,
#topic-content a:not(.header-link):focus {
  color: var(--zdc-link-hover);
  text-decoration: underline;
}

#topic-content b,
#topic-content strong,
#topic-content .bold {
  font-weight: 700;
  color: var(--zdc-text);
}

#topic-content i,
#topic-content em {
  font-style: italic;
}

/* DocBook GUI element markup Paligo emits. Zoomin renders these bold. */
#topic-content .guilabel,
#topic-content .guimenu,
#topic-content .guisubmenu,
#topic-content .guimenuitem,
#topic-content .guibutton {
  font-weight: 700;
  color: var(--zdc-text);
}

#topic-content hr {
  border: 0;
  border-top: 1px solid var(--zdc-rule);
  margin: 24px 0;
}


/* ---------------------------------------------------------------------
   5. Lists
   Zoomin: ul/ol margin 12px 0, padding-left 40px, li margin-bottom 10px
   --------------------------------------------------------------------- */
#topic-content ul,
#topic-content ol,
#topic-content .itemizedlist > ul,
#topic-content .orderedlist > ol,
#topic-content .procedure > ol {
  margin: 12px 0;
  padding: 0 0 0 40px;
}

#topic-content ul { list-style-type: disc; }
#topic-content ol { list-style-type: decimal; }
#topic-content ul ul { list-style-type: circle; }
#topic-content ul ul ul { list-style-type: square; }

#topic-content li,
#topic-content .listitem,
#topic-content .step {
  font-size:   var(--zdc-font-size);
  line-height: var(--zdc-line-height);
  color:       var(--zdc-text);
  margin:      0 0 10px;
}

/* Nested lists sit tighter, as on Zoomin. */
#topic-content li > ul,
#topic-content li > ol {
  margin: 6px 0 0;
}

/* A paragraph that is the only child of a list item carries no extra
   bottom margin -- otherwise list spacing doubles up. */
#topic-content li > p:last-child,
#topic-content .listitem > p:last-child,
#topic-content .step > p:last-child {
  margin-bottom: 0;
}

/* Numbered procedure steps: Paligo renders these as a filled navy
   circular badge (24x24px, background rgb(2,56,83), white digit) via a
   `.step::before { content: counter(step-counter) }` rule, with the ol
   and li's own list markers turned off (list-style:none) to make room
   for it. Zoomin has no such badge -- plain native decimal markers, same
   as any other ordered list. Suppress Paligo's badge and turn the
   native marker back on. Confirmed against the real "Install XProtect
   LPR" procedure. */
#topic-content .procedure > ol,
#topic-content ol.procedure {
  list-style-type: decimal;
  padding-left: 40px;
}
#topic-content .step {
  list-style-type: decimal;
}
#topic-content .step::before {
  content: none !important;
  display: none !important;
}
/* Lettered sub-steps, by DocBook convention (a, b, c...). Not confirmed
   against a real example with the same rigor as the fix above -- applied
   for consistency since the top-level fix removes Paligo's badge here
   too, which would otherwise leave sub-steps unmarked. */
#topic-content .substeps > ol {
  list-style-type: lower-alpha;
  padding-left: 40px;
}
#topic-content .substeps .step {
  list-style-type: lower-alpha;
}

/* Definition lists */
#topic-content dl { margin: 12px 0; }
#topic-content dt,
#topic-content .variablelist .term {
  font-weight: 700;
  color: var(--zdc-text);
  margin: 0;
}
#topic-content dd {
  margin: 0 0 8px;
  padding-left: 0;
}


/* ---------------------------------------------------------------------
   6. Tables
   Zoomin: collapsed 1px #C6CDCD grid on every cell, 24px/16px padding,
   vertically centred, no zebra striping, no header fill.
   --------------------------------------------------------------------- */
#topic-content .informaltable,
#topic-content .table {
  margin: 16px 0;
}

#topic-content table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  background: transparent;
  font-size:   var(--zdc-font-size);
  line-height: var(--zdc-line-height);
  color:       var(--zdc-text);
  margin: 16px 0;
}

#topic-content table th,
#topic-content table td {
  border: 1px solid var(--zdc-rule);
  padding: 24px 16px;
  vertical-align: middle;
  background: transparent;
  font-size:   var(--zdc-font-size);
  line-height: var(--zdc-line-height);
  color:       var(--zdc-text);
}

#topic-content table th {
  font-weight: 700;
  text-align: left;
}

/* Kill any zebra striping / hover tint Paligo's modern-tables sheet adds. */
#topic-content table tr,
#topic-content table tbody tr:nth-of-type(odd),
#topic-content table tbody tr:nth-of-type(even),
#topic-content table tbody tr:hover {
  background: transparent;
}

/* Last paragraph in a cell shouldn't add trailing space. */
#topic-content table td > p:last-child,
#topic-content table th > p:last-child {
  margin-bottom: 0;
}

/* Table captions */
#topic-content .table > .title,
#topic-content table caption {
  font-size: var(--zdc-font-size);
  font-weight: 700;
  color: var(--zdc-text);
  text-align: left;
  padding: 0 0 8px;
  caption-side: top;
}


/* ---------------------------------------------------------------------
   7. Admonitions (note / tip / caution / warning / important)

   Zoomin renders these as a tinted block with an 8px left accent bar,
   14px/60px padding, a 26px icon in the left gutter, and NO visible
   "Note"/"Tip" label. Paligo emits:

     [div class="note"]
       [h3 class="title"]Note[/h3]   <- already display:none in Paligo
       [p]...[/p]
     [/div]

   ...plus a FontAwesome ::before icon that is currently rendering as a
   tofu box because the icon font isn't resolving. We suppress that and
   paint the icon as a background image instead, so it is self-contained.
   --------------------------------------------------------------------- */
#topic-content .note,
#topic-content .tip,
#topic-content .caution,
#topic-content .warning,
#topic-content .important {
  position: relative;
  margin: var(--zdc-admon-margin);
  padding: var(--zdc-admon-pad);
  border: 0;
  border-left-width: var(--zdc-admon-bar);
  border-left-style: solid;
  border-radius: 0;
  font-size:   var(--zdc-font-size);
  line-height: var(--zdc-line-height);
  color:       var(--zdc-text);
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 26px 26px;
  box-shadow: none;
}

/* Suppress Paligo's broken FontAwesome glyph and its hidden title. */
#topic-content .note::before,
#topic-content .tip::before,
#topic-content .caution::before,
#topic-content .warning::before,
#topic-content .important::before,
#topic-content .note::after,
#topic-content .tip::after,
#topic-content .caution::after,
#topic-content .warning::after,
#topic-content .important::after {
  content: none !important;
  display: none !important;
}

#topic-content .note > h3.title,
#topic-content .tip > h3.title,
#topic-content .caution > h3.title,
#topic-content .warning > h3.title,
#topic-content .important > h3.title {
  display: none;
}

#topic-content .note > p:last-child,
#topic-content .tip > p:last-child,
#topic-content .caution > p:last-child,
#topic-content .warning > p:last-child,
#topic-content .important > p:last-child {
  margin-bottom: 0;
}

#topic-content .note {
  background-color: var(--zdc-note-bg);
  background-image: var(--zdc-icon-note);
  border-left-color: var(--zdc-note-accent);
}
#topic-content .tip {
  background-color: var(--zdc-tip-bg);
  background-image: var(--zdc-icon-tip);
  border-left-color: var(--zdc-tip-accent);
}
#topic-content .caution {
  background-color: var(--zdc-caution-bg);
  background-image: var(--zdc-icon-caution);
  border-left-color: var(--zdc-caution-accent);
}
#topic-content .warning {
  background-color: var(--zdc-warning-bg);
  background-image: var(--zdc-icon-warning);
  border-left-color: var(--zdc-warning-accent);
}
#topic-content .important {
  background-color: var(--zdc-important-bg);
  background-image: var(--zdc-icon-important);
  border-left-color: var(--zdc-important-accent);
}

/* Admonitions nested inside a table cell: Zoomin keeps the same block
   treatment but trims the outer margin so the cell doesn't balloon. */
#topic-content td > .note,
#topic-content td > .tip,
#topic-content td > .caution,
#topic-content td > .warning,
#topic-content td > .important {
  margin: 12px 0 0;
}
#topic-content td > .note:last-child,
#topic-content td > .tip:last-child,
#topic-content td > .caution:last-child,
#topic-content td > .warning:last-child,
#topic-content td > .important:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------------
   8. Images / figures
   --------------------------------------------------------------------- */
#topic-content .mediaobject,
#topic-content .informalfigure,
#topic-content .figure {
  margin: 16px 0 20px;
}

#topic-content .mediaobject img,
#topic-content .figure img,
#topic-content img.materialboxed,
#topic-content img {
  max-width: 100%;
  height: auto;
  border: 0;
  margin: 0;
  display: inline-block;
  box-shadow: none;
  border-radius: 0;
}

/* Figure titles */
#topic-content .figure > .title,
#topic-content .caption {
  font-size: 14px;
  line-height: 20px;
  color: var(--zdc-text);
  margin: 8px 0 0;
  font-weight: 400;
}


/* ---------------------------------------------------------------------
   9. Code
   --------------------------------------------------------------------- */
#topic-content code,
#topic-content .literal,
#topic-content .code,
#topic-content .filename,
#topic-content .command,
#topic-content .userinput {
  font-family: var(--zdc-font-mono);
  font-size: 1em;
  background-color: var(--zdc-code-bg);
  color: var(--zdc-code-text);
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  white-space: normal;
}

#topic-content pre,
#topic-content .programlisting,
#topic-content .screen {
  font-family: var(--zdc-font-mono);
  font-size: 14.4px;
  line-height: 1.45;
  color: #333333;
  background-color: var(--zdc-pre-bg);
  padding: 12px;
  border: 0;
  border-radius: 4px;
  margin: 0 0 10px;
  white-space: pre-wrap;
  overflow: auto;
}

/* A [code] inside a [pre] must not double up on the chip styling. */
#topic-content pre code,
#topic-content .programlisting code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  white-space: pre-wrap;
}


/* ---------------------------------------------------------------------
   10. Blockquotes
   --------------------------------------------------------------------- */
#topic-content blockquote {
  margin: 16px 0;
  padding: 0 0 0 20px;
  border-left: 4px solid var(--zdc-rule);
  color: var(--zdc-text);
  font-size: var(--zdc-font-size);
  line-height: var(--zdc-line-height);
}


/* ---------------------------------------------------------------------
   11. Narrow screens
   Zoomin drops the icon gutter and tightens admonition padding.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  #topic-content .titlepage h2.title { font-size: 28px; line-height: 34px; }
  #topic-content .titlepage h3.title { font-size: 24px; line-height: 30px; }

  #topic-content .note,
  #topic-content .tip,
  #topic-content .caution,
  #topic-content .warning,
  #topic-content .important {
    padding: 14px 16px 14px 48px;
    background-position: 12px 16px;
    background-size: 22px 22px;
  }

  #topic-content table th,
  #topic-content table td {
    padding: 12px 10px;
  }
}


/* ---------------------------------------------------------------------
   12. KNOWN STRUCTURAL DIFFERENCE -- not fixable in CSS
   ---------------------------------------------------------------------
   On the Zoomin page, "The information tag" and "The model label" are
   both [h2] (28px, weight 600) -- sibling sections.

   In the Paligo output, "The information tag" is h3.title but "The model
   label" is h4.title, i.e. Paligo nests it one level deeper (it comes in
   through an xincluded sub-topic). CSS cannot tell that apart from a
   genuinely nested subsection elsewhere in the corpus, so the fix belongs
   in the Paligo source structure, not here.

   If you decide you want ALL h4 subsections to read as siblings of h3
   across the whole site, uncomment this -- but check a few deeply nested
   topics first, because it will flatten real hierarchy too.

   #topic-content .titlepage h4.title {
     font-size:   28px;
     line-height: 34px;
     font-weight: 600;
     margin:      28px 0 14px;
   }
   --------------------------------------------------------------------- */


/* =====================================================================
   13. LEFT NAVIGATION / TABLE OF CONTENTS
   ---------------------------------------------------------------------
   Zoomin's TOC rail, measured:
     container   #FFFFFF, 380px wide
     header      "TABLE OF CONTENTS" 14px/27px 700 uppercase #000,
                 padding 0 15px, min-height 48px, 1px #D6D6D6 underline
     top rows    li has 1px #D6D6D6 bottom rule; link 16px/20px weight 400
                 #000; row padding 20px 0 20px 20px, min-height 50px
     current     same colour, weight 700 (no bar, no fill)
     nested rows padding 16px 0 16px 40px, NO bottom rule, same 16px type

   Paligo's markup:
     aside.site-sidebar
       .site-sidebar-header   -> .navbar-toggle + a > img#logotype-pageheader
       form.site-sidebar-search -> input#search.search-field
       ul.toc.nav.nav-site-sidebar
         li[.active][.opened] > a.topic-link
         li > a.topic-link.topichead > span.glyphicon   (expander)
           ul > li > a.topic-link                        (submenu)

   Two things worth knowing before you ship this:

   1. THE LOGO. Paligo's corporate-logo.png is white artwork meant for the
      navy rail. On a white rail it would vanish, so it is recoloured to
      Milestone blue with a CSS filter. That works because the Zoomin logo
      is monochrome blue too. If you have a blue-on-transparent PNG/SVG,
      point Paligo at that instead and delete --zdc-logo-to-blue -- a real
      asset always beats a filter.

   2. THE SEARCH BAND stays navy on purpose. Zoomin has a full-width navy
      search bar under its white masthead; keeping this band navy echoes
      that and means the existing white-on-navy input still works.

   NOT reproducible in CSS: Zoomin's "Expand / Collapse" buttons under the
   TOC heading need JS. Paligo's per-node chevrons are kept instead.
   ===================================================================== */
:root {
  --zdc-toc-width:   380px;
  --zdc-toc-bg:      #FFFFFF;
  --zdc-toc-rule:    #D6D6D6;
  --zdc-toc-text:    #000000;
  --zdc-toc-navy:    #023853;  /* Paligo's existing sidebar navy */
  --zdc-toc-hover:   #F2F6F8;
  --zdc-toc-row-pad: 20px 16px 20px 20px;
  --zdc-toc-sub-pad: 16px 16px 16px 40px;
  --zdc-logo-width:  180px;
  /* White artwork -> Milestone blue (#0099DA). Drop this if you supply a
     logo that is already blue. */
  --zdc-logo-to-blue: brightness(0) saturate(100%) invert(45%) sepia(93%)
                      saturate(1852%) hue-rotate(168deg) brightness(97%)
                      contrast(101%);
}

/* --- rail ------------------------------------------------------------ */
/* !important here is deliberate: Paligo sets the sidebar background and
   width from theme1-colors.css and an inline [style] block that both load
   after layout-custom-style.css. */
aside.site-sidebar {
  background-color: var(--zdc-toc-bg) !important;
  width: var(--zdc-toc-width) !important;
  border-right: 1px solid var(--zdc-toc-rule);
  font-family: var(--zdc-font);
  color: var(--zdc-toc-text);
}

/* The content column is offset by the rail width -- keep them in step. */
.site-content {
  margin-left: var(--zdc-toc-width) !important;
}

/* --- masthead -------------------------------------------------------- */
aside.site-sidebar .site-sidebar-header {
  background: var(--zdc-toc-bg);
  border-bottom: 1px solid var(--zdc-toc-rule);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 88px;
}

aside.site-sidebar .site-sidebar-header > a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Paligo pads the logo (20px 0 45px) to centre it in the navy block;
   that padding fights the flex centring here, so it is zeroed. */
aside.site-sidebar #logotype-pageheader.logo {
  filter: var(--zdc-logo-to-blue);
  width: var(--zdc-logo-width);
  height: auto;
  max-width: none;
  display: block;
  padding: 0;
  margin: 0;
}

/* Hamburger bars are white artwork -- darken them for the light rail. */
aside.site-sidebar .navbar-toggle .icon-bar {
  background-color: var(--zdc-toc-navy) !important;
}

/* --- search band ----------------------------------------------------- */
aside.site-sidebar .site-sidebar-search {
  background: var(--zdc-toc-navy);
}

aside.site-sidebar #search.search-field {
  background-color: rgba(255, 255, 255, .14);
  color: #FFFFFF;
  border: 0;
  font-family: var(--zdc-font);
  font-size: 14px;
  padding: 12px 20px;
}

aside.site-sidebar #search.search-field::placeholder {
  color: rgba(255, 255, 255, .7);
}

/* --- "TABLE OF CONTENTS" heading ------------------------------------- */
/* Paligo has no element for this, so it is generated. Change the string
   here if you localise the site. */
aside.site-sidebar ul.nav-site-sidebar {
  margin: 0;
  padding: 0;
  background: transparent;
}

aside.site-sidebar ul.nav-site-sidebar::before {
  content: "TABLE OF CONTENTS";
  display: flex;
  align-items: center;
  padding: 0 20px;
  min-height: 48px;
  font-family: var(--zdc-font);
  font-size: 14px;
  line-height: 27px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--zdc-toc-text);
  border-bottom: 1px solid var(--zdc-toc-rule);
}

/* --- top-level rows -------------------------------------------------- */
aside.site-sidebar ul.nav-site-sidebar > li {
  border-bottom: 1px solid var(--zdc-toc-rule);
  background: transparent;
  margin: 0;
  padding: 0;
}

aside.site-sidebar ul.nav-site-sidebar > li > a.topic-link {
  font-family: var(--zdc-font);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--zdc-toc-text) !important;
  padding: var(--zdc-toc-row-pad);
  min-height: 60px;
  display: flex;
  align-items: center;
  background: transparent;
  text-decoration: none;
}

aside.site-sidebar ul.nav-site-sidebar > li > a.topic-link:hover,
aside.site-sidebar ul.nav-site-sidebar > li > a.topic-link:focus {
  background: var(--zdc-toc-hover);
  color: var(--zdc-toc-text) !important;
}

/* Zoomin marks the current topic with weight alone -- no bar, no fill. */
aside.site-sidebar ul.nav-site-sidebar > li.active > a.topic-link,
aside.site-sidebar ul.nav-site-sidebar > li.current > a.topic-link {
  font-weight: 700;
  color: var(--zdc-toc-text) !important;
  background: transparent;
}

/* --- nested rows ----------------------------------------------------- */
aside.site-sidebar ul.nav-site-sidebar ul {
  background: transparent;
  padding: 0;
  margin: 0;
}

aside.site-sidebar ul.nav-site-sidebar ul > li {
  border-bottom: 0;
}

aside.site-sidebar ul.nav-site-sidebar ul > li > a.topic-link {
  font-family: var(--zdc-font);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--zdc-toc-text) !important;
  padding: var(--zdc-toc-sub-pad);
  display: flex;
  align-items: center;
  background: transparent;
}

aside.site-sidebar ul.nav-site-sidebar ul > li > a.topic-link:hover {
  background: var(--zdc-toc-hover);
}

aside.site-sidebar ul.nav-site-sidebar ul ul > li > a.topic-link {
  padding-left: 60px;
}

aside.site-sidebar ul.nav-site-sidebar ul > li.active > a.topic-link {
  font-weight: 700;
}

/* --- expander chevron ------------------------------------------------ */
/* Styling only -- SmartMenus still owns the show/hide behaviour. */
aside.site-sidebar ul.nav-site-sidebar .glyphicon {
  color: var(--zdc-toc-navy) !important;
  opacity: .65;
}

aside.site-sidebar ul.nav-site-sidebar a.topic-link:hover .glyphicon {
  opacity: 1;
}

/* --- narrow screens: let Paligo's own collapse behaviour win ---------- */
@media (max-width: 767px) {
  aside.site-sidebar { width: 100% !important; }
  .site-content { margin-left: 0 !important; }
}


/* =====================================================================
   14. TOOLBAR + BREADCRUMB
   ---------------------------------------------------------------------
   Zoomin's breadcrumb bar, measured:
     bar        padding 0 32px, min-height 62px, 1px #D6D6D6 underline,
                display flex, align-items center, flex-wrap wrap
     items      14px / 17px, weight 500, #212529
     current    14px, weight 700, #0099DA
     separator  10x7 chevron SVG, 5px side margins, #838486

   Paligo emits:
     .site-content > .toolbar
       .toolbar-tools        -> .tool-print / .tool-search (display:none
                                unless enabled in your Paligo layout)
       .breadcrumb-container -> ul.breadcrumb
                                  li.breadcrumb-link > a   (ancestors)
                                  li.breadcrumb-node       (current topic)

   Paligo's separator is a "/" on li + li::before; it is swapped for the
   chevron below.

   The bar keeps its 64px height rather than Zoomin's 62px on purpose:
   aside.section-nav-container is position:fixed with top:64px, and the
   two would drift apart. The 2px is invisible; the misalignment is not.
   ===================================================================== */
:root {
  --zdc-bar-rule: #D6D6D6;
  --zdc-bar-text: #212529;
  --zdc-bar-h:    64px;
  --zdc-bar-pad:  0 32px;
  --zdc-crumb-sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' fill='none' stroke='%23838486' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 0.8 L6.2 3.5 L2.5 6.2'/%3E%3C/svg%3E");
}

.site-content > .toolbar {
  background: #FFFFFF;
  min-height: var(--zdc-bar-h);
  padding: var(--zdc-bar-pad);
  border-bottom: 1px solid var(--zdc-bar-rule);
  display: flex;
  align-items: center;
  font-family: var(--zdc-font);
}

.site-content > .toolbar .breadcrumb-container {
  flex: 1 1 auto;
  min-width: 0;
}

/* Print / search actions. Paligo hides these unless they are switched on
   in the layout; this only styles them for when they are. */
.site-content > .toolbar .toolbar-tools {
  float: none;
  flex: 0 0 auto;
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-content > .toolbar .toolbar-tools .fa {
  color: #838486;
  font-size: 16px;
}

.site-content > .toolbar .toolbar-tools .fa:hover {
  color: var(--zdc-link);
}

.site-content > .toolbar ul.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  background: transparent;
  list-style: none;
  font-family: var(--zdc-font);
  font-size: 14px;
  line-height: 17px;
}

.site-content > .toolbar ul.breadcrumb > li {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: var(--zdc-bar-text);
  padding: 0;
  margin: 0;
}

.site-content > .toolbar ul.breadcrumb > li > a {
  font-family: var(--zdc-font);
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: var(--zdc-bar-text);
  text-decoration: none;
}

.site-content > .toolbar ul.breadcrumb > li > a:hover {
  color: var(--zdc-link);
  text-decoration: none;
}

/* Current topic: bold Milestone blue, as on Zoomin. */
.site-content > .toolbar ul.breadcrumb > li.breadcrumb-node {
  font-weight: 700;
  color: var(--zdc-link);
}

/* Chevron separator replaces Paligo's "/". */
.site-content > .toolbar ul.breadcrumb > li + li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 7px;
  margin: 0 8px;
  padding: 0;
  background-image: var(--zdc-crumb-sep);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 7px;
}


/* =====================================================================
   15. SECTION NAV -- "ON THIS TOPIC"
   ---------------------------------------------------------------------
   Zoomin's mini TOC, measured:
     title   "ON THIS TOPIC" 14px / 25px, 700, uppercase, #000,
             15px gap below
     list    padding 0 4px, list-style none
     link    14px / 19px, weight 400, #000, padding 8px 0 8px 10px
     rail    a::before -- 2px wide, #D6D6D6, absolute, left -4px, full
             height of the row, so the segments form a continuous line
     active  Zoomin has NO scrollspy highlight

   Paligo emits aside.section-nav-container > ul.section-nav.nav, with a
   1px #E6E6E6 border-left on the ul (replaced by the per-row rail here)
   and a scrollspy that puts .active on the li.

   DELIBERATE DEVIATION: Paligo's scrollspy marks the active section with
   a 6px blue dot and blue link text. Zoomin has no such indicator, but it
   is a genuinely useful affordance, so rather than deleting it the dot
   becomes a Milestone-blue segment of the rail and the text stays black.
   To go fully Zoomin, set --zdc-sec-active to the same value as
   --zdc-sec-rule and the highlight disappears.

   SPECIFICITY NOTE: content-theme2.css defines
   `.theme1 .section-nav.nav > li.active > a::before` (0-4-2). The active
   rules below are prefixed with body[class*="theme"] purely to outrank
   it -- that is why they look heavier than the rest of this file.
   ===================================================================== */
:root {
  --zdc-sec-width:  250px;
  --zdc-sec-rule:   #D6D6D6;
  --zdc-sec-active: #0099DA;
  --zdc-sec-text:   #000000;
}

aside.section-nav-container {
  width: var(--zdc-sec-width);
  padding: 24px 0 0 0;
  font-family: var(--zdc-font);
  background: transparent;
}

/* Paligo has no element for the heading, so it is generated.
   Change the string here if you localise the site. */
aside.section-nav-container::before {
  content: "ON THIS TOPIC";
  display: block;
  font-family: var(--zdc-font);
  font-size: 14px;
  line-height: 25px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--zdc-sec-text);
  margin: 0 0 15px 10px;
}

aside.section-nav-container ul.section-nav,
aside.section-nav-container ul.section-nav ul.nav {
  border-left: 0;   /* replaced by the per-row rail below */
  margin: 0;
  list-style: none;
}

aside.section-nav-container ul.section-nav { padding: 0 4px; }
aside.section-nav-container ul.section-nav ul.nav { padding: 0; }

aside.section-nav-container ul.section-nav li {
  position: relative;
  padding: 0;
  margin: 0;
}

aside.section-nav-container ul.section-nav a {
  position: relative;
  display: block;
  font-family: var(--zdc-font);
  font-size: 14px;
  line-height: 19px;
  font-weight: 400;
  color: var(--zdc-sec-text);
  padding: 8px 0 8px 10px;
  margin: 0;
  background: transparent;
  text-decoration: none;
}

/* The 2px rail segment beside every entry. Rows are contiguous, so the
   segments read as one continuous line -- same as Zoomin. */
aside.section-nav-container ul.section-nav a::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
  border-radius: 0;
  background-color: var(--zdc-sec-rule);
}

aside.section-nav-container ul.section-nav a:hover {
  color: var(--zdc-sec-active);
}

/* Paligo's first entry is the topic title; Zoomin's mini TOC omits it.
   It is kept here as a "back to top" affordance, weighted to match.
   Add `display: none` if you would rather drop it. */
aside.section-nav-container ul.section-nav > li:first-child > a {
  font-weight: 700;
}

/* Second level indents. */
aside.section-nav-container ul.section-nav ul.nav a {
  padding-left: 24px;
}

/* Scrollspy active state -- see the specificity note above. */
body[class*="theme"] aside.section-nav-container ul.section-nav.nav li.active > a {
  color: var(--zdc-sec-text);
  font-weight: 400;
}

body[class*="theme"] aside.section-nav-container ul.section-nav.nav > li:first-child.active > a {
  font-weight: 700;
}

body[class*="theme"] aside.section-nav-container ul.section-nav.nav > li.active > a::before,
body[class*="theme"] aside.section-nav-container ul.section-nav.nav li.active > a::before {
  background-color: var(--zdc-sec-active);
  width: 2px;
  left: -4px;
  top: 0;
  bottom: 0;
  height: auto;
  border-radius: 0;
}


/* ---------------------------------------------------------------------
   16. Prev / next pager
   --------------------------------------------------------------------- */
#top-pager ul.pager,
ul.pager {
  font-family: var(--zdc-font);
}

ul.pager a,
ul.pager a:visited {
  font-family: var(--zdc-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--zdc-link);
  text-decoration: none;
}

ul.pager a:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------------------
   17. Accordion / collapsible sections ("What's new" release history)
   ---------------------------------------------------------------------
   Both platforms collapse older release-history entries behind a
   clickable heading -- Paligo's Bootstrap-style panel/collapse component
   (.accordion > .panel > .panel-heading / .panel-body.collapse) and
   Zoomin's MadCap "drop-down" widget (h2.MCDropDownHead) render the same
   underlying content, so the interaction itself needs no CSS change.

   Only the closed-row heading look differs, confirmed on the XProtect
   Mobile client "What's new?" page on both sites:
     Paligo   16px/700/UPPERCASE, Material blue rgb(25,118,210)
     Zoomin   16px/400, sentence case, Milestone blue (var(--zdc-link))

   NOT changed: the small grey disclosure triangle to the left of each
   heading. Its rendering mechanism could not be pinned to a stable
   selector via computed-style inspection (not a ::before/::after on any
   candidate element, not a list-style marker) -- left as Paligo's
   default rather than guessing a fragile override.
   --------------------------------------------------------------------- */
#topic-content .accordionhead,
#topic-content .panel-heading a[data-toggle="collapse"] {
  text-transform: none;
  color: var(--zdc-link);
  font-weight: 400;
}


/* ---------------------------------------------------------------------
   18. Print
   --------------------------------------------------------------------- */
@media print {
  #topic-content .note,
  #topic-content .tip,
  #topic-content .caution,
  #topic-content .warning,
  #topic-content .important {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}