@font-face {
    font-family: 'SegmentFont';
    src: url('https://www.invertekdrives.com/fonts/7 Segment.ttf') format('truetype');
}
@font-face {
    font-family: 'FA6 Solid';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2') format('woff2');
}
span.guilabel {
    font-family: 'SegmentFont';
}
.portal-header::after {
    filter: none;
}
.portal-header .logo {
    height: 60px;
    margin-bottom: 0;
}
.portal-header h1 {
    margin-top: 4.6em;
    position: relative;
}
.portal-header h1::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5em);
    transform: translateX(-50%);
    background: url('https://www.invertekdrives.com/img/common/logos/optidrive-elevator-core-stacked-white-orange-highlight.svg') center center / contain no-repeat;
    height: 2.5em;
    width: auto;
    aspect-ratio: 1 / 0.45340699815;
}
@media (min-width: 768px) {
    .portal-header h1 {
        margin-top: 3.6em;
    }
    .portal-header .logo {
        margin-bottom:0;
        height: 80px
    }
}
@media (min-width: 992px) {
    main article {
        margin-left: 5%;
    }
}
p, pre {
    margin: 0 0 0.75em;
}
.topic-content table td, .topic-content table th {
    padding: 0.5em;
}
.site-sidebar .logo {
    height: 100px;
}
a,.text-primary,.btn-primary .badge,.btn-link,.pagination>li>a,.pagination>li>span,.nav-site-sidebar .active>a,.portal-single-publication .publication-icon i,.portal-single-publication .publication-icon .fa,.publication-contents a:hover,.publication-contents h4 a,.titlepage h1.title,.titlepage h2.title,.titlepage h3.title {
    color: #535486;
}

.bg-primary,.btn-primary,.publications-condensed .portal-single-publication a,.toolbar,.tool-search-form .search-field,.pager li>a:hover,.pager li>span:hover,.colored-top .site-sidebar-header {
    background-color: #535486;
}

.btn-primary,.nav .open>a,.nav .open>a:hover,.nav .open>a:focus,.colored-top .site-sidebar-header {
    border-color: #535486;
}

a:hover,a:focus,a.text-primary:hover,a.text-primary:focus,.btn-link:hover,.btn-link:focus,.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus {
    color: #593696;
}

a.bg-primary:hover,a.bg-primary:focus,.btn-primary:hover,.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus,.portal-header .portal-search button:hover {
    background-color: #593696;
}

.nav-site-sidebar li a:focus{
    background-color: transparent;
}

.btn-primary:hover,.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus {
    border-color: #593696;
}

.portal-header .portal-search button {
    background-color:#535486;
}

.publication-contents h4 span {
    background-color: transparent;
}

.portal-footer {
    background: #535486;
    color: #fff;
}

[class*="cat-panel-"]:before {
    font-family: 'FA6 Solid' !important;
    font-weight: 900 !important;
    font-size: 48px !important; /* icon size */
    line-height: 1 !important;
}
/* Tile size */
.portal-publications .inner {
    max-width: 1000px; /* overall width of the tile grid - lower = narrower tiles */
    margin-left: auto;
    margin-right: auto;
}
.portal-single-publication > a {
    padding-top: 1.75em !important;    /* space above icon */
    padding-bottom: 1.5em !important;  /* space below label */
    min-height: 0 !important;
}
.cat-panel-1:before {
    content: "\f3ed";
}
.cat-panel-2:before {
    content: "\f05a";
}
.cat-panel-3:before {
    content: "\f0ad";
}
.cat-panel-4:before {
    content: "\f0e7";
}
@media (min-width: 992px) {
    .portal-single-publication .publication-icon {
        width: 80px;
    }
}
.cat-panel-5:before {
    content: "\f11c";
}
.cat-panel-6:before {
    content: "\f46c";
}
.cat-panel-7:before {
    content: "\f00b";
}
.cat-panel-8:before {
    content: "\f085";
}
.cat-panel-9:before {
    content: "\f542";
}
.cat-panel-10:before {
    content: "\f0ec";
}
.cat-panel-11:before {
    content: "\f205";
}
.cat-panel-12:before {
    content: "\f28d";
}
.cat-panel-13:before {
    content: "\f201";
}
.cat-panel-14:before {
    content: "\f2db";
}
.cat-panel-15:before {
    content: "\f5df";
}
.cat-panel-16:before {
    content: "\e55b";
}
.cat-panel-17:before {
    content: "\f6ff";
}
.cat-panel-18:before {
    content: "\e4e2";
}
.cat-panel-19:before {
    content: "\f7d9";
}

.portal-publications .inner .portal-single-publication {
    display: block !important;
}
.portal-publications .show-all-categories {
    display: none;
}
.featured-content.portal-contents, .featured-content-label {
    display: none;
}
main {
    display: grid;
}
main .titlepage {
    position: sticky;
    top: var(--toolbar-h, 64px); /* set by scripts.js, falls back to 64px */
    z-index: 10;
    background: #fff;
    padding: 0.5em 0;
}
main section .section.accordion {
    position: relative;
    z-index: 9;
}
main hr {
    border-bottom: 1px solid #ccc;
}
.panel-heading.active + .panel-body {
    display: block !important;
    height: auto !important;
}
main .informaltable th {
    background: rgba(83, 84, 134, 0.1);
}
.content-wrapper .topic-content .section-toc {
    display: none;
}
.fixed-toolbar .toolbar, .paligo-preview .toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11;
}
/* ------------------------------------------------------------------
   STICKY TABLE HEADERS
   Switched on in the layout: Table styles > Extra responsive table
   features (3 = every table with 3 or more columns).
   Paligo's responsive table script floats a copy of the header row
   (.sticky-table-header) at the top of the screen once the real header
   scrolls out of view, and adds .fixed-solution to the table wrapper.
   Tables scroll with the page as normal.
   - top: --toolbar-h is set by scripts.js from the real toolbar height
     (falls back to 64px), so the floating header sits directly under
     the fixed toolbar.
   - z-index sits above the sticky title bar (10) and the accordion
     sections (9), so the table header is never hidden behind them.
   - Solid background stops table rows showing through the header.
     #eeeef3 is the header tint rgba(83, 84, 134, 0.1) on white.
   ------------------------------------------------------------------ */
.fixed-solution .sticky-table-header {
    top: var(--toolbar-h, 64px) !important;
    z-index: 12 !important;
}
.fixed-solution .sticky-table-header th,
.fixed-solution .sticky-table-header td {
    background: #eeeef3;
}
/* ------------------------------------------------------------------
   COMPACT TABLE HEADER ROW
   The floating sticky header is a copy of the real header row, so
   making the real header smaller also shrinks the sticky one.
   - Removes the 0.75em bottom margin that the global p rule adds
     inside each header cell (Paligo wraps header text in <p>).
   - Tighter padding and line-height than the default table cells.
   Only thead is targeted, so table body rows keep normal spacing.
   ------------------------------------------------------------------ */
.topic-content .informaltable thead th,
.fixed-solution .sticky-table-header th {
    padding: 0.3em 0.5em;
    line-height: 1.25;
    vertical-align: middle;
}
.topic-content .informaltable thead th p,
.fixed-solution .sticky-table-header th p {
    margin: 0;
}
/* ------------------------------------------------------------------
   ADVANCED SEARCH PAGE HEADER
   Makes the Algolia advanced search page banner match the landing
   page. Only applies to pages with body.search-page.
   - Photo: the landing page image (css/image/portal-bg.jpg). The path
     is relative to this CSS file, which sits in the css folder. If the
     banner shows no photo, change it to ../css/image/portal-bg.jpg.
     The existing .portal-header::after rule (filter: none) keeps it
     unfiltered, as on the landing page.
   - Height: 350px, the same as the landing page header.
   - Logo: the Elevator Core logo, drawn above the search box. The
     landing page attaches it to the h1, which the search page does
     not have, so here it sits on the search box container instead.
   ------------------------------------------------------------------ */
body.search-page .portal-header::after {
    background: url('image/portal-bg.jpg') no-repeat center center !important;
    background-size: cover !important;
}
body.search-page .portal-header {
    height: 350px;
}
body.search-page .portal-header .portal-search::before {
    content: '';
    display: block;
    width: 200px;
    height: 91px; /* 200px x the logo's 0.4534 aspect ratio */
    margin: 0 auto 1.5em;
    background: url('https://www.invertekdrives.com/img/common/logos/optidrive-elevator-core-stacked-white-orange-highlight.svg') center center / contain no-repeat;
}
@media (min-width: 768px) {
    body.search-page .portal-header .portal-search {
        margin-top: 2em;
    }
}
/* ------------------------------------------------------------------
   PARAMETER GROUP HEADINGS
   Makes group headings such as "Group 5.2 - Motor Brake Control -
   Motor Brake Monitoring" stand out from the parameter entries below.
   - Targets only the titles of sections nested inside a topic that are
     not accordions, so it skips the main page title and the collapsible
     parameter entries (section.accordion).
   - Paligo wraps the heading as div.title > h4.title, so the selector
     uses div.title > .title to style only the heading itself, not the
     wrapper as well.
   - Slim tinted band in the table header colour (#eeeef3) so the
     heading and its table read as one block.
   ------------------------------------------------------------------ */
.topic-content > section.section > section.section:not(.accordion) > .titlepage div.title > .title {
    background: #eeeef3;
    border-radius: 3px;
    color: #535486;
    font-weight: 600;
    font-size: 1.3em;
    padding: 0.5em 0.85em;
    margin: 0;
}
/* ------------------------------------------------------------------
   PARAMETER PAGE LAYOUT TIDY-UP
   ------------------------------------------------------------------ */

/* 1. Accordion entries (P7-01 etc.)
   Removes the large gaps above and below each collapsed parameter so
   each group stays compact. */
.topic-content section.section.accordion {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.topic-content section.section.accordion .panel-heading,
.topic-content section.section.accordion > .titlepage {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}
.topic-content section.section.accordion .panel-heading .title,
.topic-content section.section.accordion > .titlepage .title {
    margin: 0;
}

/* Accordion titles: sentence case and lighter, so the group heading
   bands lead. Shows the title as written in Paligo. */
.topic-content section.section.accordion .title {
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
}

/* 2. Multi-value table cells
   Paligo puts each option ("0: 230V UPS", "1: 400V UPS"...) in its own
   paragraph, which picks up the global p bottom margin. Keep a small
   gap between options and none after the last one. */
.topic-content table td p {
    margin: 0 0 0.3em;
}
.topic-content table td p:last-child {
    margin-bottom: 0;
}

/* 4. Full-width tables
   Every table fills the content column, so each group's table lines
   up with its heading band. */
.topic-content .informaltable table,
.topic-content .table-responsive table {
    width: 100% !important;
}

/* 5. Row striping
   Alternate rows get a tint paler than the header (#eeeef3) to help
   follow a row across the columns. */
.topic-content table tbody tr:nth-child(even) > td {
    background: #f8f8fb;
}

/* ------------------------------------------------------------------
   STICKY GROUP HEADINGS
   While scrolling through a group, its heading band sticks under the
   toolbar and the floating table header sits directly below it, so
   you always know which group the table belongs to.
   - Sticky only works inside its own section, so each heading scrolls
     away when its group ends and the next one takes over.
   - z-index 11: above the main page title (10) and accordions (9),
     below the floating table header (12).
   - White background so rows scrolling underneath don't show through.
   - The space above each group is on the wrapper (margin), not the
     heading, so it doesn't stick as empty space.
   - Accordion titles (P7-01 etc.) are not sticky.
   ------------------------------------------------------------------ */
/* Every nested title stops being sticky (overrides main .titlepage),
   including sub-headings inside parameter entries such as
   "Macro Tables" or "Motor Contactor Sequence"... */
main section.section section.section > .titlepage {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    padding: 0;
}
/* ...except the group headings: sections directly inside the topic. */
.topic-content > section.section > section.section:not(.accordion) > .titlepage {
    position: sticky;
    top: var(--toolbar-h, 64px);
    z-index: 11;
    background: #fff;
    padding: 0.25em 0 0; /* no padding below, so no gap above the table header */
    margin: 1.5em 0 0.5em;
}
/* Phones and small tablets: group headings scroll normally. On a narrow
   screen the toolbar is taller and wide tables scroll sideways, so
   Paligo positions their header differently and it slid behind the
   stuck heading. Here the table header sits directly under the toolbar. */
@media (max-width: 767px) {
    .topic-content > section.section > section.section:not(.accordion) > .titlepage {
        position: static;
        background: transparent;
        padding: 0;
    }
    /* The page title (e.g. "Group 2 Parameter Descriptions") also scrolls
       normally on phones. When sticky it covered the top of the floating
       table header, which Paligo places directly under the toolbar. */
    main .titlepage {
        position: static;
    }
}
/* Toolbar above everything that sticks or floats, so a heading or
   table header scrolling up slides behind it, not over it. */
.fixed-toolbar .toolbar, .paligo-preview .toolbar {
    z-index: 20;
}
/* Floating table header: below the stuck group heading.
   --group-h is the height of the heading currently stuck, set by
   scripts.js (0px when none is stuck). */
.fixed-solution .sticky-table-header {
    top: calc(var(--toolbar-h, 64px) + var(--group-h, 0px)) !important;
}

/* ------------------------------------------------------------------
   SEARCH FILTERS: TWO COLUMNS
   Lays out the checkbox options under each filter heading (Motor
   Type, Supply Type...) in two columns on the advanced search page.
   Uses Algolia's standard filter list class. Long labels wrap within
   their column. Falls back to one column on phones.
   ------------------------------------------------------------------ */
body.search-page .ais-RefinementList-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    row-gap: 0.4em;
}
body.search-page .ais-RefinementList-item {
    margin: 0;
}
@media (max-width: 480px) {
    body.search-page .ais-RefinementList-list {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
   SEARCH FILTERS: CLOSE UP THE GAPS
   Less space between filter groups (Motor Type, Supply Type...) on
   the advanced search page.
   - Group headings are h4.refinement-title inside .filters-panel; the
     options for each group are in the div that follows (e.g.
     #motor_type-refinement).
   - Checkbox kept beside its label, so wrapped labels like
     "Rollback/Starting" don't drop under the checkbox.
   ------------------------------------------------------------------ */
body.search-page .filters-panel .refinement-title {
    margin: 1em 0 0.4em;
    padding-bottom: 0.3em;
}
body.search-page .filters-panel .refinement-title + div,
body.search-page .filters-panel [id$="-refinement"] {
    margin: 0;
    padding: 0;
}
body.search-page .filters-panel .ais-RefinementList,
body.search-page .filters-panel .ais-RefinementList-list {
    margin: 0;
    padding: 0;
}
body.search-page .ais-RefinementList-list {
    row-gap: 0.25em;
}
body.search-page .ais-RefinementList-label {
    display: flex;
    align-items: flex-start;
    gap: 0.35em;
    margin: 0;
    line-height: 1.25;
}
body.search-page .ais-RefinementList-checkbox {
    margin: 0.15em 0 0;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   SEARCH FILTERS: HIDE COUNTS
   The numbers beside each filter option count Algolia records (one
   per topic section), not topics, so they look inflated. Hidden to
   avoid confusion; the filters work the same without them.
   ------------------------------------------------------------------ */
body.search-page .ais-RefinementList-count {
    display: none;
}

/* ------------------------------------------------------------------
   "IN THIS SECTION" LINKS AS TILES
   Chapter pages with no content of their own (e.g. Introduction,
   Drive Features & Functions) list their topics at the bottom in
   .footer-content > .section-toc.section-toc-after. This lays the
   links out as tiles matching the home page: white, no border, soft
   shadow, square corners, solid purple icon. As many 240px+ columns as fit, one on phones.
   - Paligo sets display: block inline on the ul, so the grid needs
     !important.
   - Icons use the FA6 Solid font already loaded at the top of this
     file.
   ------------------------------------------------------------------ */

/* Close the gap between the page title and the list: only on pages
   that have this list, so normal topics keep their spacing. */
.topic-content:has(.section-toc-after) > section.section {
    padding-bottom: 0;
    margin-bottom: 0;
}
.topic-content .footer-content:has(.section-toc-after) {
    margin-top: 0;
    padding-top: 0;
}
.topic-content .footer-content .section-toc-after {
    margin-top: 0.5em;
}
.topic-content .footer-content .section-toc-after .section-toc-title {
    color: #535486;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1em;
}
.topic-content .footer-content .section-toc-after > ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6em;
    list-style: none;
    margin: 0;
    padding: 0;
}
.topic-content .footer-content .section-toc-after > ul > li {
    margin: 0;
    padding: 0;
}
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link {
    display: flex;
    align-items: center;
    gap: 0.75em;
    height: 100%;
    padding: 0.65em 1em;
    background: #fff;
    border: 1px solid rgba(83, 84, 134, 0.08);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(83, 84, 134, 0.18); /* light purple shadow */
    color: #333;
    font-size: 0.95em;
    line-height: 1.3;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s, color 0.2s;
}
/* Icon: solid purple, no background, as on the home page tiles */
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link::before {
    content: "\f15c"; /* file-lines */
    font-family: 'FA6 Solid';
    font-weight: 900;
    font-size: 1.2em;
    line-height: 1;
    color: #535486;
    width: 1.2em;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.2s;
}
/* Chevron pushed to the right */
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link::after {
    content: "\f054"; /* chevron-right */
    font-family: 'FA6 Solid';
    font-weight: 900;
    font-size: 0.7em;
    color: #c4c4d6;
    margin-left: auto;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link:hover,
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link:focus {
    box-shadow: 0 6px 18px rgba(83, 84, 134, 0.3);
    transform: translateY(-2px);
    color: #535486;
}
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link:hover::before,
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link:focus::before {
    color: #593696;
}
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link:hover::after,
.topic-content .footer-content .section-toc-after > ul > li > a.topic-link:focus::after {
    color: #535486;
    transform: translateX(3px);
}

/* ------------------------------------------------------------------
   STICKY HEADERS FOR TABLES WITH NESTED TABLES
   Paligo's sticky header plugin can't handle a table that has another
   table inside a cell (e.g. the 0 : Ramp to stop / 1 : Coast to stop
   option lists), so scripts.js skips those. For them, the header cells
   of the outer table stick under the toolbar using CSS instead.
   - Desktop/tablet only: on phones these tables need to scroll
     sideways, which stops CSS sticky from working.
   - The table's wrapper normally clips overflow; it's made visible
     here so the header can stick to the page.
   - Only the outer table's header sticks, not the nested tables'.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .topic-content .table-responsive:has(table table) {
        overflow: visible !important;
    }
    .topic-content .table-responsive:has(table table) > table > thead > tr > th {
        position: sticky;
        top: var(--toolbar-h, 64px);
        z-index: 12;
        background: #eeeef3;
        box-shadow: inset 0 -1px 0 #d9d9e3;
    }
}

/* ------------------------------------------------------------------
   TABLE HEADER ALIGNMENT
   Some header cells were showing left-aligned even though they are
   set to centre in Paligo, so they didn't line up with the centred
   numbers below. Header cells now follow the alignment set in Paligo
   (the align attribute), in the table and in the floating sticky copy.
   ------------------------------------------------------------------ */
.topic-content table th[align="center"],
.topic-content table th[align="center"] p,
.sticky-table-header th[align="center"],
.sticky-table-header th[align="center"] p {
    text-align: center !important;
}
.topic-content table th[align="left"],
.topic-content table th[align="left"] p,
.sticky-table-header th[align="left"],
.sticky-table-header th[align="left"] p {
    text-align: left !important;
}
.topic-content table th[align="right"],
.topic-content table th[align="right"] p,
.sticky-table-header th[align="right"],
.sticky-table-header th[align="right"] p {
    text-align: right !important;
}
