/* Image side-by-side */
.flex-container{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
}
/* End of image side-by-side */



/* Front page styling */
.inner h1 {
    display: none;
}
.portal-header {
    height: 130px;
    background-color: #4d89c8;
}
.portal-header .inner {
    display: flex;
    flex-direction: row;
    position: relative;
}
.portal-header .inner:before {
    content: 'Manual';
    position: absolute;
    left: 20%;
    font-size: 30px;
}
@media(max-width:1199px) {
    .portal-header .inner:before {
        display: none;
    }
}
.portal-header:after {
    background-size: unset;
}
@media(max-width:798px) {
    .portal-header:after {
        background-size: cover;
    }
}
.portal-header .logo-link {
    flex: 1;
}
@media(max-width:1199px) {
    .portal-search {
        width: 100%;
    }
}
@media(max-width:1199px) {
    .portal-header .logo-link {
        display: none;
    }
}
.portal-publications {
    display: none;
}

.publication-contents h4 span {
    display: none;
}
.dropup {
    text-transform: capitalize;
}
.publication-contents li:before {
    color: #4790d0;
    opacity: .6;
}
.featured-content-label {
    visibility: hidden;
    margin: 60px 0;
}
.featured-content-label:before {
    content: 'Topic overview';
    visibility: visible;
    text-transform: initial;
    font-size: 20px;
}
/* End of Front page styling */



/* List item custom styling */
.listitem p {
    margin: 0;
}
.itemizedlist {
    padding-left: 10px;
}
/* End of List item styling */



/* Table custom styling */
table {
    border: 1px solid #ddd;
}
table>tbody>tr:nth-child(even)>.td, table>tbody>tr:nth-child(even)>th {
    background-color: #fff;
}

table>tbody>tr:nth-child(odd)>.td, table>tbody>tr:nth-child(odd)>th {
    background-color: #eee;
}
td {
    padding: 5px 10px;
}
thead th {
    padding: 5px 10px;
}
.not-gray td{
    background-color:transparent!important
}
/* End of Table custom styling */



/* 7 Segment fonts */
@font-face {
    font-family: '7 Segments';
    src:
    url(../fonts/7-Segment.ttf) format('ttf'),
    url(../fonts/7-Segment.woff) format('woff');
    font-weight: normal;
}



/* Use 7 Segment fonts */
.computeroutput {
    font-family: '7 Segments', 'Roboto', sans-serif;
    background-color: unset;
    color: unset;
    font-weight: bold;
}



/* Enable navigation buttons for mobile */
@-ms-viewport{width:device-width}
.visible-lg,.visible-md,.visible-sm,.visible-xs{display:block!important}



/* Glossary term styling */
.glossterm {
    font-weight: bold;
    font-style: normal;
    color: rgba(0, 95, 190, 1);
}
/* End of Glossary term styling */



/* Section title styling (chapter, section, and subsection headings, e.g. 4, 4.1, 4.1.1) */
h2.title,
h3.title,
h4.title {
    color: rgba(0, 95, 190, 1);
}
/* End of Section title styling */



/* "In this section" label styling */
.section-toc-title {
    color: rgba(0, 95, 190, 1);
}
/* End of "In this section" label styling */



/* Bridgehead styling (lead in labels using bridgehead instead of glossterm) */
.bridgehead {
    color: rgba(0, 95, 190, 1);
    font-weight: bold;
}
/* End of Bridgehead styling */


/* ANSI Z535.6 safety panels (WARNING, CAUTION, NOTICE, supplemental directive)
   The signal word sits in a coloured bar with the symbol inside the bar.
   Symbols are embedded as SVG, so no image assets need to be uploaded. */

/* 1. Switch off the default Paligo icon on these four panel types only.
      Normal notes and tips elsewhere in the manual keep their icons. */
.warning::before,
.caution::before,
.note.notice::before,
.note.directive::before {
    content: none !important;
    display: none !important;
}
.warning,
.caution,
.note.notice,
.note.directive {
    background-image: none;
}
.warning > img,
.caution > img,
.note.notice > img,
.note.directive > img {
    display: none;
}

/* 2. Shared panel frame */
.warning,
.caution,
.note.notice,
.note.directive {
    background-color: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    margin: 20px 0;
    padding: 0 15px 12px 15px;
}

/* 2b. Light tint for the panel body, derived from the signal colour */
.warning {
    background-color: #fff5ea;
}
.warning.danger {
    background-color: #fdeff1;
}
.caution {
    background-color: #fffbe3;
}
.note.notice,
.important {
    background-color: #eef5fc;
}

/* 2c. Paligo styles the danger admonition as .warning.danger, two classes,
      which outranks the frame rule above. Repeated here with the same
      specificity so the frame stays neutral. */
.warning.danger {
    border: 2px solid #1a1a1a;
}

/* 3. Signal word bar, shared geometry */
.warning > h3.title,
.warning > .title,
.caution > h3.title,
.caution > .title,
.note.notice > h3.title,
.note.notice > .title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -15px 14px -15px;
    padding: 9px 15px;
    border-radius: 4px 4px 0 0;
    font-weight: bold;
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* 4. Safety alert symbol inside the bar.
      The triangle has no fill, so the colour of the bar shows through and the
      symbol stays consistent if a bar colour is ever changed. Only the outline
      colour differs, because black does not read on the red DANGER bar. */
.warning > h3.title::before,
.warning > .title::before,
.caution > h3.title::before,
.caution > .title::before {
    content: "";
    flex: 0 0 auto;
    width: 34px;
    height: 31px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1.5 L23 20.5 H1 Z' fill='none' stroke='%23000000' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='11' y='7.5' width='2' height='7' fill='%23000000'/%3E%3Ccircle cx='12' cy='17.2' r='1.3' fill='%23000000'/%3E%3C/svg%3E");
}

/* DANGER: white outline and white exclamation mark on the red bar */
.warning.danger > h3.title::before,
.warning.danger > .title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1.5 L23 20.5 H1 Z' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='11' y='7.5' width='2' height='7' fill='%23FFFFFF'/%3E%3Ccircle cx='12' cy='17.2' r='1.3' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* 5. Signal word colours */
.warning.danger > h3.title,
.warning.danger > .title {
    background-color: #c8102e;
    color: #fff;
}
.warning > h3.title,
.warning > .title {
    background-color: #ff7900;
    color: #000;
}
.caution > h3.title,
.caution > .title {
    background-color: #ffd100;
    color: #000;
}
.note.notice > h3.title,
.note.notice > .title {
    background-color: #005eb8;
    color: #fff;
    font-style: italic;
}

/* 5b. Signal word colour on the inner elements as well.
      The signal word sits inside <emphasis role="bold">, which Paligo renders as
      a nested element that carries its own colour. Without these rules the bar
      is coloured correctly but the word stays black, which fails on the red
      DANGER bar and the blue NOTICE bar. */
.warning.danger > h3.title,
.warning.danger > .title,
.warning.danger > h3.title *,
.warning.danger > .title * {
    color: #fff !important;
}
.warning > h3.title,
.warning > .title,
.warning > h3.title *,
.warning > .title * {
    color: #000 !important;
}
.caution > h3.title,
.caution > .title,
.caution > h3.title *,
.caution > .title * {
    color: #000 !important;
}
.note.notice > h3.title,
.note.notice > .title,
.note.notice > h3.title *,
.note.notice > .title * {
    color: #fff !important;
}

/* 6. NOTICE keeps an information symbol, drawn in white for the blue bar.
      ANSI does not use the safety alert triangle for NOTICE. */
.note.notice > h3.title::before,
.note.notice > .title::before {
    content: "";
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='11' y='10' width='2' height='8' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='6.6' r='1.4' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 7. Supplemental directive: mandatory action, no signal word.
      Blue frame and the refer to manual symbol in front of the first line.
      Works both with <note role="directive"> and with <important>. */
.important::before {
    content: none !important;
    display: none !important;
}
.note.directive,
.important {
    border: 2px solid #005eb8;
    border-radius: 6px;
    padding: 16px 15px 16px 66px;
    position: relative;
}
/* The supplemental directive carries the heading IMPORTANT. It is not a signal
   word, so it gets no coloured bar, only the panel colour in bold. */
.note.directive > h3.title,
.note.directive > .title,
.important > h3.title,
.important > .title {
    margin: 0 0 8px 0;
    padding: 0;
    background: none;
    color: #005eb8;
    font-weight: bold;
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.note.directive > h3.title *,
.note.directive > .title *,
.important > h3.title *,
.important > .title * {
    color: #005eb8;
}
.note.directive::after,
.important::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 16px;
    width: 38px;
    height: 38px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23005EB8'/%3E%3Cpath d='M5 7.5h5.6v9.2H5z' fill='%23ffffff'/%3E%3Cpath d='M13.4 7.5H19v9.2h-5.6z' fill='%23ffffff'/%3E%3Crect x='11.2' y='6.6' width='1.6' height='11' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
}
.note.directive > p:first-of-type,
.important > p:first-of-type {
    margin-top: 0;
}

/* 8. Panel body */
.warning > p,
.caution > p,
.note.notice > p,
.note.directive > p,
.warning .itemizedlist,
.caution .itemizedlist,
.note.notice .itemizedlist {
    margin-left: 0;
}
/* End of ANSI Z535.6 safety panels */

/* 9. Fallback for the supplemental directive in HTML5.
      Paligo can inject an automatic label and an icon of its own into an
      <important>. The label is only suppressed where the panel has no title of
      its own, the icon is always suppressed, because section 7 draws it. */
.important > h3:not(.title),
.important > h4:not(.title),
.important > .admonition-title,
.important > .admon-title,
.important > header,
.important > p.title {
    display: none !important;
}
.important > img,
.important > div:first-child > img,
.important > p:first-child > img,
.important img.admon-icon,
.important img[src*="important"],
.important img[src*="Important"] {
    display: none !important;
}
/* End of directive fallback */