@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');

:root {
    /* Abbreviations: bkg=background, bdr=border, int=interactive, hz=horizontal, vt=vertical, btn=button, con=container, tbl=table
      sec=secondary, */
    /* layout variables */
    --con-max-width: 1600px; /* Value for largest desktop only. Any container limited to the middle column (or right column on tablet where the action column goes away). */
    --con-hz-margins: 5%; /* Used in grids and footer. Redefined smaller for smaller desktops, tablet, and mobile in media-queries.css */
    --sidebar-max-width: 350px; /* For largest desktop only, 1501 and above. Redefined for smaller desktops, tablet, and mobile in media-queries.css. Mobile doesn't have sidebars but this width is used to set the max header width in the page grid and the toc block width. */
    --max-line-length: 48em; /* Equals approximately 104 to 110 characters at our default 16 px Roboto font, which is the outer limit for usability. This limit is required for usability. Considering that API documentation often has a lot of tables, we want the main container to be as wide as possible to allow for wide tables with lots of data. But at high desktop resolutions, the natural line length in the main container at its maximum width is too long for normal paragraphs. This setting won't affect most devices because the natural line length will already be less than this. */
    --color-body-bkg: #ffffff;
    --bdr-radius: 16px; /* for all rounded elements like buttons and input boxes */
    --tbl-cell-padding: 0.75rem; /* equivalent of 12px at our 16px base */
    /* header banner variables */
    --color-header-bkg: #ffffff; /* header container */
    --font-family-header: 'Roboto', sans-serif;
    --font-size-header: 55px;
    --line-height-header: 1.2em;
    --font-weight-header: 700; /* 500 or 700 */
    --color-header-title: #002e5d; /* project title only */
    --color-header-logo: #7c878e; /* What's this for? Don't see anywhere the logo color be set in the UI and this is used in rules only as a background and border color that we have commented out. */
    --header-btn-size: 2rem; /* for consistent height of the search box, and height and width of the search and index buttons. */
    /* topic content variables */
    /* In the following font-family strings, the emoji fonts cover some fonts that might be on the user's system, assuming authors used emojis in their technical documentation. The main support for less common unicode characters comes from Noto Sans Symbols 2, which comes after the user's system sans-serif font because if the reader has blocked the download of fonts, or if ONLY Roboto is unavailable from Google for some reason, we don't want Noto Sans Symbols to be used as the body font. It renders text correctly but it's very light/thin and almost unreadable. */
    --font-family-default: 'Roboto', sans-serif, "Noto Sans Symbols 2", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-heading: 'Roboto Light', 'Roboto', sans-serif, "Noto Sans Symbols 2";
    --font-family-monospace: 'Consolas', 'Lucida Console','Courier New', monospace;
    --font-weight-light: 300; /* headings */
    --font-weight-regular: 400; /* text */
    --font-weight-medium: 500; /* medium for ?? Not used */
    --font-weight-bold: 700; /* strong/bold text, table headers */

    --font-size-tiny: 0.75rem; /* 12px, footer text */
    --line-height-tiny: 1.05rem;
    --font-size-small: 0.875rem; /* 14px, toc and actions itt */
    --line-height-small: 1.175rem;
    --font-size-regular: 1rem; /* 16px, normal text */
    --line-height-regular: 1.5rem; /* font plus 0.5 */
    --font-size-h6: 1.125rem; /* 18px, h6 */
    --line-height-h6: 1.525rem; /* font plus 0.4 */
    --font-size-h5: 1.375rem; /* 22px, h5 */
    --line-height-h5: 1.775rem; /* font plus 0.4 */
    --font-size-medium: 1.625rem; /* 26px, h4 */
    --line-height-medium: 2.025rem; /* font plus 0.4 */
    --font-size-large: 2rem; /* 32px, h3 */
    --line-height-large: 2.4rem; /* font plus 0.4 */
    --font-size-larger: 2.375rem; /* 38px, h2 */
    --line-height-larger: 2.775rem; /* font plus 0.4 */
    --font-size-giant: 2.875rem; /* 46px, h1, i-page-title on start page */
    --line-height-giant: 3.275rem; /* font plus 0.4 */
    /* 99.9% of the time, we use fixed values for spacing because we want consistent and proportional space values
  across devices and resolutions, and we don't want it to be based on font size. */
    --space-tiny: 4px;
    --space-small: 8px;
    --space-small-medium: 12px;
    --space-regular: 16px; /* "normal" spacing above/below paragraphs */
    --space-medium: 24px;
    --space-large: 32px;
    --space-extra-large: 64px;
    --space-above-heading: 0.65rem; /* Exception to constant values where we want the space to adjust based on heading 
  text size. This ensures that the proportional space above a heading is consistent across headings. */


    --color-headings: #002e5d; /* WCAG 2.0 AAA contrast. */
    --color-headings-sec: #003da5; /* actions/itt head. WCAG 2.0 AAA contrast. */
    --color-text: #000000; /* WCAG 2.0 AAA contrast. */
    --color-text-sec: #6d777d; /* darker version of Contiem #7c878e, same Sat/Hue. WCAG 2.0 AA contrast. */
    --color-int: #498500; /* links, in this topic li a left border, i-search border, left border on current actions (itt) item. WCAG 2.0 AA contrast. */
    --color-int-visited: #523178; /* Contiem purple, like default visited link color in browsers. WCAG 2.0 AA contrast. */
    --color-alert: #7f0000; /* red background for i-before-header-content, if used. Can be used anywhere you want red, text or bkgrnd. */

    --color-bdr: #d6d9db; /* header container bottom border,  toc opened border for mobile, hr if used */
    --color-bdr-int: #498500; /* dynamic image border, any border on an interactive element */
    --color-box-bkg: #eff0f1; /* toc selected item, in this topic container background (if used) note box background */
    --color-box-bdr: #003da5; /* left border on notes, border on tab containers */
    --color-popup-bkg: #f0f5ff; /* background for popup and hover tip boxes */
    --color-popup-bdr: #003da5; /* border for popup and hover tip boxes */

    --color-tbl-bdr: #c3c7c9;
    --color-tbl-head-bkg: #eff0f1;
    --color-tbl-rows-banded: #f4f4f4; /* if you want banded rows on tables */
    --color-footer-bkg: #002e5d; /* footer container */
    --color-footer-text: #ffffff;
    /* Dark theme colors or colors on a dark background in the light theme */
    --color-int-dark: #76bf1d;
    --color-dark-int-visited: #b08dd9;
}

/*************** START BASE ELEMENTS *******************/
/* Some of the rules in this section are specific to content in the body-content, but they still belong 
in this section because they create a default format for base elements, like a bullet list item. */

html,
body {
    font-family: var(--font-family-default);
    font-size: var(--font-size-regular);
    line-height: var(--line-height-regular);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    margin: 0 auto;
    text-align: left;
    background-color: var(--color-body-bkg);
    text-rendering: optimizeLegibility;
    box-sizing: border-box; /* DO NOT change this. This is vital for proper layout. Rather than setting border-box for 
  every element with the * rule below, this is the most current and flexible way to establish consistent box-sizing 
  that is then inherited by every element unless it is overridden in a specific rule. Which is basically never because
  content-box is terrible. */
}

/* DO NOT change this. This is vital for proper layout. ALL elements are set to 0 margin and padding because we don't 
want each browser to use its built-in default spacing or box-sizing (which can vary across browsers) for anything. */
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

    /* Set the focus outline color for all elements */
    *:focus {
        outline-color: var(--color-alert);
    }

/* For usability and accessibility, DO NOT remove the default underline on links. Per WAI, it's okay to remove the underline
in containers where the content is solely a list of navigation links, such as in the toc and actions containers. It is *generally*
not okay to remove them anywhere in the body content, like in a bullet list of linked pages. Depending on the context, and how the
list is introduced, it *might* be okay, but it's safer to leave them. It's not okay to remove them when you have mixed content of 
some links and some text, as you might have in a footer with a copyright statement and links mixed together.
In this block, we just set the link colors. Where applicable, removing the underline is done in the rules for the specific links
in their specific containers. */
a,
a.i-glossary-link:visited,
a.i-popup-link:visited {
    color: var(--color-int-visited);
}

    a:visited {
        color: var(--color-int-visited);
    }

    a:hover,
    a:focus {
        color: var(--color-text);
    }

    a.i-glossary-link,
    a.i-glossary-link:visited,
    a.i-popup-link,
    a.i-popup-link:visited {
        border-bottom: 1px dotted var(--color-int);
        text-decoration: none;
    }

        a.i-glossary-link:hover,
        a.i-glossary-link:focus,
        a.i-popup-link:hover,
        a.i-popup-link:focus {
            border-bottom-color: var(--color-text);
        }

/* Because we are following WCAG for when to use button elements, icons that perform a function on the current page
must be coded as button elements. However, we don't want them to have all the default styling that gets set by the
browser (user agent), so we're going to remove all of that. However, customers may want to use normal buttons on their 
pages and we should establish default styling for those that matches our design. So these rules establish the default
styling and the icon buttons will have their own rule that overrides/removes all the button styling. */

/* Here are all the properties set by Chrome that aren't overridden in a-normalize.css. */
button {
    appearance: none;
    text-rendering: inherit; /* auto */
    color: white; /* buttontext */
    letter-spacing: inherit; /* normal */
    word-spacing: inherit; /* normal */
    text-indent: 0px; /* 0px */
    text-shadow: none; /* none */
    display: inline-block; /* inline-block */
    text-align: center; /* center */
    align-items: flex-start; /* Has no effect because display is set to inline block. */
    cursor: default; /* default */
    background-color: var(--color-int); /* buttonface */
    border-width: 0; /* 2px */
    border-style: none; /* outset */
    border-color: inherit; /* buttonborder */
    border-image: none; /* initial */
    border-radius: var(--bdr-radius); /* Contiem website uses squre buttons, but we're using rounded inputs and circle icons */
    padding: var(--space-tiny) var(--space-small);
    padding-top: calc(var(--space-tiny) + 1px);
}

    button:active {
        border-style: none; /* inset */
    }

    label,button.i-icon-btn {
        color: var(--color-int); /* buttontext */
        background-color: transparent; /* buttonface */
        border-radius: unset;
    }

p {
    margin: var(--space-medium) 0;
    max-width: var(--max-line-length);
}

/* Reduce top margin on common elements immediately after a heading */
:is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, dl) {
    margin-top: var(--space-regular);
}

ul,
ol,
dl {
    margin: var(--space-medium) 0;
    padding-left: var(--space-large);
}

/* Indent bullet lists a little more without changing the bullet character position/spacing. */
ul {
    margin-left: var(--space-small);
}

    ul ul,
    ul ol,
    ol ol,
    ol ul {
        margin-top: var(--space-regular);
    }

ol ol {
    list-style-type: lower-alpha;
}

    ol ol ol {
        list-style-type: lower-roman;
    }

#i-body-content li {
    margin-top: var(--space-medium);
    max-width: var(--max-line-length);
}

    #i-body-content li > p:first-child {
        margin-top: 0;
    }

img {
    max-width: 100%;
    height: auto;
}

.i-image img {
    width: 1.5rem;
    max-width: 2rem;
}

#i-body-content img {
    border: 0px solid var(--color-bdr);
}

    #i-body-content img.img-inline {
        border: none;
    }

hr {
    height: 1px;
    border-style: none;
    background: var(--color-bdr);
}


/*****    Headings    ****/

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.i-page-title-text,
.i-section-heading,
.i-see-also-sub-heading {
    color: var(--color-headings);
    font-weight: var(--font-weight-light);
    font-family: var(--font-family-heading);
    margin: var(--space-above-heading) 0 0;
    max-width: var(--max-line-length);
}

h1,
p.i-page-title-text {
    font-size: var(--font-size-giant);
    line-height: var(--line-height-giant);
    margin: 0;
}

h2,
.i-section-heading {
    font-size: var(--font-size-larger);
    line-height: var(--line-height-larger);
}

h3 {
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
}

h4 {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
}

h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
}

h6,
.i-see-also-sub-heading {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
}

.i-see-also-sub-heading {
    margin-top: var(--space-regular);
}


/* Toggle images in headings */

/* This rule is used in Collapsible Headings and the See Also heading. The See Also heading is coded properly as an H2 
and so this rule applies to that specific button. The background won't position unless you make the entire button bigger. 
But we want the button size to determine the background size. So we use vertical-align to move the button up to better 
align with the heading text. */
.i-section-heading-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: var(--space-small);
    background-repeat: no-repeat;
    vertical-align: 5px;
}

.i-section-heading .i-section-heading-icon {
    background-image: url("../images/i-collapse-up.svg") !important;
}

.i-section-heading.i-section-heading-collapsed .i-section-heading-icon {
    background-image: url("../images/i-expand-down.svg") !important;
}

/* The Collapsible Heading widget has different code and this button for
that widget needs different alignment and so has an additional class. */
.i-section-heading-icon.i-collapsible-heading-icon {
    vertical-align: 12px;
}

/****    End headings    ***/

input {
    font-family: var(--font-family-default);
}

pre {
    margin: 0;
    font-size: 1em;
    display: block;
    font-family: monospace;
    unicode-bidi: isolate;
}

.code, .i-code {
    font-family: monospace, Courier New, Courier;
}

.i-tab-container .ui-tabs-panel, .i-tab-container > div {
    padding: 0.5em 0.6em;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

pre, code, kdb, samp {
    font-family: var(--font-family-monospace);
    /* From tablet.css */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

    pre > pre {
        font-size: inherit;
    }

/* Built-in class for marking UI element names in content. Provided as a convenience to point customers in the right 
direction for how to correctly mark up their content. I.e., don't use <strong> or <bold>. Show them the right way. */
span.ui {
    font-weight: var(--font-weight-bold);
}


/****    Tables    ***/

table,
caption,
thead,
tbody,
tfoot {
    font-size: var(--font-size-regular);
    line-height: calc(var(--line-height-regular)*0.82);
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td,
caption {
    max-width: var(--max-line-length);
}

caption,
figcaption {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--color-text-sec);
    margin: var(--space-medium) 0 var(--space-tiny);
    text-align: left;
}

/* Default table style with no class */
#i-body-content table {
    width: auto;
    max-width: 100%;
}

    #i-body-content table.tbl-100 {
        width: 100%;
    }

#i-body-content th,
#i-body-content td {
    border: 0 solid var(--color-tbl-bdr);
    border-left-width: 1px;
    border-top-width: 1px;
    padding: var(--tbl-cell-padding);
}

#i-body-content th {
    vertical-align: bottom;
    font-weight: var(--font-weight-bold);
    background-color: var(--color-tbl-head-bkg);
}

#i-body-content tfoot {
    background-color: var(--color-box-bkg);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

/* from topics.css, if we want banded rows. */
/*.i-body-content table tr:nth-of-type(odd) {
    background-color: var(--color-tbl-rows-banded);
}*/

.i-body-content table th, .i-body-content table td {
    border-color: #d0d0d0;
}

.i-body-content table th, .i-body-content table td {
    border-style: solid;
    border-width: 1px;
    padding: 4px;
}

.i-body-content table {
    border-collapse: collapse;
    width: 100%;
}

.i-body-content table td {
    line-height: 140%;
    vertical-align: top;
}

#i-body-content td {
    vertical-align: top;
}

/* add bottom border on last row */
#i-body-content tr:last-child td {
    border-bottom-width: 1px;
}

/* add right border on last column */
#i-body-content td:last-child,
#i-body-content th:last-child {
    border-right-width: 1px;
}

/* Reduce top/bottom space inside table cell. */
#i-body-content td :is(p, ol, ul, dl) {
    margin-top: var(--space-regular);
    margin-bottom: var(--space-regular);
}

/* Now undo the top margin for the first child inside a note, tip, or caution inside table cell. */
#i-body-content td .i-box :first-child {
    margin-top: 0;
}

/* Now undo the bottom margin for the last child inside a note, tip, or caution inside table cell. */
#i-body-content td .i-box :last-child {
    margin-bottom: 0;
}

/* And while we're at it, make the icon smaller because the text is smaller */

#i-body-content td li {
    margin-top: 0;
    margin-bottom: var(--space-regular);
}

/* Remove any top margin on the first element inside a cell. */
#i-body-content td > :first-child,
#i-body-content td > ul:first-child li:first-child,
#i-body-content td > ol:first-child li:first-child {
    margin-top: 0;
}

/* Remove any bottom margin on the last element inside a cell */
#i-body-content td > :last-child,
#i-body-content td > ul:last-child li:last-child,
#i-body-content td > ol:last-child li:last-child {
    margin-bottom: 0;
}
/* Change the left indent on lists so they aren't indented when they are the only element in a cell. Keeps the normal indent if they aren't the only child. */
#i-body-content td ul:only-child,
#i-body-content td ol:only-child {
    padding-left: var(--space-regular);
    margin-left: 0;
}

/* Members Table Style from topics.css. Don't know where this table is used. I couldn't find it in the output and I added every widget and the community
feature to the project topics. Note that i-description isn't the members table; it's a different thing. */
/* from topics.css */
td.i-description, td.i-member-description {
    width: 80%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* word-break: break-word; deprecated */
    hyphens: auto;
}
/* from topics.css */
td.i-link, td.i-member-link, td.i-new-member-link {
    width: 20%;
}
/* from topics.css */
.i-body-content td.i-image {
    width: 1%;
    padding-bottom: 0;
}
    /* from topics.css */
    .i-body-content td.i-image img {
        width: 16px;
        height: 16px;
        margin-top: 4px;
        max-width: none !important;
    }
/* from topics.css */
td.i-link,
td.i-member-link,
td.i-new-member-link,
td.i-image {
    white-space: nowrap;
}
/* End Members Table Style from topics.css. */

/****    End tables    ***/


/*************** END BASE ELEMENTS *******************/


/******* START PAGE COMPONENTS, from top to bottom of page **********/

a.i-skip-to-main {
    padding: var(--space-small);
    position: absolute;
    top: -50px;
    left: 0px;
    color: white;
    background: var(--color-alert);
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 100;
}

    a.i-skip-to-main:focus {
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-transition: top .1s ease-in;
        transition: top .1s ease-in;
    }

/* The template doesn't have content in this container, but it's set up to allow the customer to add content here. */
#i-before-header-content {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    background-color: var(--color-alert);
    color: #ffffff;
}

#page-grid {
    display: grid;
    position: relative;
    top: 0;
    min-width: 100%;
    min-height: 0;
    grid-template-rows: auto auto auto minmax(var(--space-large), max-content) 1fr;
    grid-template-columns: minmax(0, var(--con-hz-margins)) minmax(0, var(--sidebar-max-width)) minmax(0, var(--con-max-width)) minmax(0, var(--sidebar-max-width)) minmax(0, var(--con-hz-margins));
    grid-template-areas:
        "hd hd  hd hd  hd"
        ".  ah  ah ah  . "
        ".  bc  bc bc  ."
        ".  toc mn as  . "
        "ft ft  ft ft  ft";
    /* "hd" is the <header> element, "ah" is the After Header div container (if any), "bc" is the Before Content div container (if any), "toc" is the <nav> element for the dynamic toc outer container, "mn" is <main> element that holds the body-content, "as" is the <aside> element for the actions outer container ("in this topic" list), "ft" is the i-footer-content div, NOT the <footer> element that is inside that div. */
}

/* Global class to set a container to be the max page width for main content column and centered.
Because this comes before the container-specific rules, the auto L/R margin centering 
can be overridden in the container itself (e.g., the breadcrumb container). */
.i-content-width-container {
    max-width: var(--con-max-width);
    margin: 0 auto;
}

/* Overlay for the main content area. From topics.css */
.i-busy-overlay {
    z-index: 10;
    background: white;
    position: fixed;
    height: 100%;
    width: 100%;
    max-width: var(--con-max-width);
}

/* By default, hide the mobile nav actions bar. It will be turned on in the media-queries.css. */
#mobile-nav-row {
    display: none;
}

/************ START HEADER CONTAINER *****************/

#i-header-container {
    background-color: var(--color-header-bkg);
    grid-area: hd;
    border-bottom: 3px solid var(--color-bdr);
    margin-bottom: var(--space-large);
}

/************ start header grid *****************/

#i-header-content {
    display: grid;
    position: relative;
    row-gap: 0;
    grid-auto-rows: auto;
    grid-auto-columns: minmax(0, var(--con-hz-margins)) minmax(0, max-content) 1fr 30% minmax(0, var(--con-hz-margins));
    grid-template-areas:
        "lg lg pt hb .";
    /* lg is the logo container, pt is the project title, and hb is the help buttons container that contains the search input and index button.*/
}

/* If we decide to allow customers to put a background image into the header grid, the code to allow this is partially
written. A placeholder image is present but commented out in the topics master page and browser search and index pages.
This rule will autosize the image to the grid track so it covers the entire width. On wide screens (1402+px), the height 
will be cropped. There's still a gap between the image and the bottom of the header container that I didn't have time to fix.
If we decide not to allow this, those images in the page templates, the placeholder image itself in the template image folder, 
and this rule and corresponding rules in media-queries.css need to be deleted. */
#header-img {
    /* grid-area: 1 / 1 / 3 / -1;
  object-fit: cover;
  width: 100%;
  max-height: 350px;
  overflow-x: hidden;
  opacity: 0.25; */
    display: none; /* Until we decide if we will allow a header background image */
}

/******* logo/title rows in grid ********/

#logo-container {
    /*background-color: var(--color-header-logo);
  border: 1pt solid var(--color-header-logo);
  border-radius: var(--bdr-radius);*/
    grid-area: lg;
    margin: var(--space-regular) var(--space-regular);
}

.logoimage {
    width: auto;
}

#i-project-title {
    grid-area: pt;
    font-family: var(--font-family-header);
    font-size: var(--font-size-larger);
    line-height: var(--line-height-larger);
    font-weight: var(--font-weight-bold);
    color: var(--color-header-title);
    text-align: left;
    margin: var(--space-regular) var(--space-regular);
    align-self: center;
}

.i-project-title {
    grid-area: pt;
    font-family: var(--font-family-header);
    font-size: var(--font-size-larger);
    line-height: var(--line-height-larger);
    font-weight: var(--font-weight-bold);
    color: var(--color-header-title);
    text-align: left;
    margin: var(--space-regular) var(--space-regular);
    align-self: center;
}

/* contains the search function */
.i-header-buttons-container {
    grid-area: hb;
    display: grid;
    grid-auto-rows: auto;
    grid-auto-columns: 1fr minmax(0, max-content);
    grid-template-areas:
        "sch idx";
    /* sch is the search container, idx is the index button.*/
    align-items: center;
    margin-left: var(--space-regular);
    justify-items: end;
}

.i-search-container {
    grid-area: sch;
    width: 100%;
}

    .i-search-container form {
        display: flex;
        width: 100%;
        align-items: center;
    }

#i-search,
#i-index-button {
    border-color: var(--color-bdr-int);
    border-radius: var(--bdr-radius);
}

.i-search-highlight {
    background-color: yellow;
}

/* input box */
#i-search {
    height: var(--header-btn-size);
    padding: 0 var(--space-small) 0 var(--space-small);
    border-width: 1px;
    border-style: solid;
    flex: 80%;
}

#i-search-button,
#i-execute-search {
    height: var(--header-btn-size);
    width: var(--header-btn-size);
    background: no-repeat center/80% url("../images/i-search.svg");
    cursor: pointer;
    /* override user agent stylesheet defaults for submit button */
    border-width: 0;
    border-style: none;
    margin-left: var(--space-small);
}

#i-index-button {
    grid-area: idx;
    height: var(--header-btn-size);
    width: var(--header-btn-size);
    background: no-repeat center/80% url("../images/i-index.svg");
    border-width: 1px;
    border-style: solid;
    margin-left: var(--space-regular);
}

/**** Special styling for the large banner on the home/default/start page or any other page
to which the customer applies the start-page.html page type. *****/

#i-header-content.i-start-page {
    grid-auto-columns: minmax(0, var(--con-hz-margins)) 1fr minmax(0,var(--sidebar-max-width)) minmax(0, var(--con-hz-margins));
    /* hb is the help buttons container that contains the search input */
    grid-template-areas:
        "lg lg hb ."
        ". pt pt .";
}

.i-start-page .logoimage {
    max-width: 17rem;
    max-height: 7rem;
}

.i-start-page #i-project-title {
    font-size: var(--font-size-header);
    line-height: var(--line-height-header);
    text-align: center;
    margin: 0 0 var(--space-extra-large);
}

.i-start-page .i-header-buttons-container {
    align-content: flex-start;
    margin-top: var(--space-regular);
}

/******************* END HEADER CONTAINER ***********************/


/* The template doesn't have content in this container, but it's set up to allow the customer to add content here. */
#i-after-header-container {
    grid-area: ah;
}

#i-after-header-content {
    grid-area: ah;
    padding-right: var(--space-large);
    position: sticky;
    top: 0;
    align-self: start;
    width: 100%;
    background-color: #ffffff;
    margin-bottom: var(--space-regular);
	z-index: 1000;
}

/* We don't need to show the breadcrumb in the desktop layout where there is a sticky TOC that's always 
visibile and shows where the user is located in the topic structure. */
#i-breadcrumbs-outer-container {
    display: none;
}

.i-breadcrumbs-container {
    font-size: var(--font-size-tiny);
    line-height: var(--line-height-tiny);
}

/* The template doesn't have content in this container, but it's set up to allow the customer to add content here. */
#i-before-content-container {
    grid-area: bc;
}


/*************** START TOC CONTAINER *****************/

#i-toc-outer-container {
    grid-area: toc;
    padding-right: var(--space-large);
    position: sticky;
    top: 0;
    align-self: start;
    width: 100%;
    background-color: #ffffff;
    margin-bottom: var(--space-regular);
	position: relative;
}

    /* By default, hide the button to close the toc. It will be turned on and styled in the media-queries.css */
    #i-toc-outer-container > button {
        display: none;
    }

#i-toc-container {
    position: relative;
    max-height: 100%;
}

#i-toc-content {
    position: relative;
    width: auto;
    /*bottom: 20px; OC unset override [20px] from @media only screen and (min-width: 769px) */
    max-width: var(--sidebar-max-width);
    /* overflow-y: auto; from @media only screen and (min-width: 769px) */
    /* overflow-x: hidden; from @media only screen and (min-width: 769px) */
}

.i-toc-content-scroll-container {
    max-height: 95vh;
    overflow-y: auto;
}

/* from orbis connect */
#i-toc-content .ui-resizable-e {
    /* right: 0;  prop from topic.css */
    /* width: 6px;  prop from topic.css */
    /* margin-top: 8px;  prop from topic.css */
    display: none; /* turned off the resizable feature for Orbis Connect. May need to reimplement for rhtml. */
}

/* from orbis connect */
#i-toc-content .ui-resizable-e {
    /* right: 0;  prop from topic.css */
    /* width: 6px;  prop from topic.css */
    /* margin-top: 8px;  prop from topic.css */
    /* turned off the resizable feature in for Orbis Connect. May need to reimplement for rhtml. */
    display: none;
}

/* Default format for any heading in an aside element, such as the TOC heading and the actions heading. They 
use the same class so that they are consistent. They are both output as <h3>. */
.i-aside-heading {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-regular);
    line-height: var(--line-height-regular);
    color: var(--color-headings-sec);
    margin: 0 0 var(--space-small);
}


/*************** END TOC CONTAINER *****************/


/*************** START ACTIONS (in this topic) CONTAINER *****************/

#i-actions-outer-container {
    grid-area: as;
    padding-left: var(--space-large);
    position: sticky;
    top: 0;
    align-self: start;
    width: 100%;
}

#i-actions-container {
    position: relative;
}

    #i-actions-container span,
    #i-actions-container a {
        display: block;
    }

#i-actions-content {
    background: white;
    position: relative;
    z-index: unset;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    max-width: var(--sidebar-max-width);
}

#i-actions-container .i-in-this-topic-container {
    display: block; /* This stylesheet is for desktop defaults. Hiding this block in the tablet and mobile are in media queries. */
    max-height: 95vh;
    overflow-y: auto;
    padding-bottom: var(--space-regular);
}

ul.i-in-this-topic {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.i-in-this-topic-root {
    display: block;
    background: white;
}

    /* First selector allows the selective visibility of child headings to be controlled via a template setting */
    ul.i-in-this-topic-root.i-in-this-topic-child-headings-always-visible ul.i-in-this-topic,
    li.i-inthistopic-visible ul.i-in-this-topic {
        display: block;
    }

ul.i-in-this-topic li > a {
    position: relative;
    display: block;
    text-decoration: none;
    padding: var(--space-small) 0 var(--space-small) var(--space-small);
    color: var(--color-int);
    border-left-color: var(--color-int);
    border-left-style: solid;
    border-left-width: 3px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* When the heading that the itt item relates to is visible in the viewport */
ul.i-in-this-topic li.i-inthistopic-visible > a {
    border-left-color: var(--color-headings-sec);
    color: var(--color-headings-sec);
    background-color: var(--color-box-bkg);
    font-weight: var(--font-weight-bold);
}

ul.i-in-this-topic li.i-heading-level-3 a {
    padding-left: var(--space-medium);
}

/**** Expand/collapse all button and drop-down/expandable text widgets ****/

/* All of the dynamic text elements are inextricably tied together. Since the first occurrence of one of 
these elements is the expand/collapse button in the actions container, I grouped all of the relevant
rules here even though some of them don't apply specifically to the E/C button (many do). /* These affect the 
show all/hide all widget wherever it is placed, and the expand all/collapse all function in the actions container, 
the drop-down widget and the expandable text widget. */

.i-toggle-all-sections {
    margin-bottom: var(--space-small);
}

.i-dropdown-heading,
.i-show-all-dropdowns,
.i-hide-all-dropdowns {
    display: block;
    cursor: pointer;
    color: var(--color-int) !important;
    text-decoration: underline dotted var(--color-int) 1px !important;
    background-image: url('../images/i-expand-down.svg') !important;
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position-y: 6px !important;
    padding-left: var(--space-medium) !important;
}

    .i-dropdown-heading.i-extext-btn {
        display: inline-block;
        background-image: url('../images/i-expand-to-right.svg');
        background-size: 1.05rem;
        background-position-y: 4px;
        margin-right: var(--space-small);
        margin-top: 0;
    }

.i-toggle-all-dropdowns .i-hide-all-dropdowns {
    display: none;
}

.i-dropdown-heading-expanded,
.i-hide-all-dropdowns {
    background-image: url('../images/i-collapse-up.svg') !important;
    background-position-y: 4px;
}

    .i-dropdown-heading-expanded.i-extext-btn {
        background-image: url('../images/i-collapse-to-left.svg');
    }

.i-toggle-all-dropdowns {
    text-align: left !important;
}

    .i-toggle-all-dropdowns div {
        display: inline;
    }

.i-dropdown-content {
    overflow: visible !important; /* Prevents jumping during height animation */
    display: none;
    margin-left: var(--space-medium); /* must match the left padding on .i-dropdown-heading */
    padding-bottom: var(--space-tiny);
    border-bottom: 1px dotted var(--color-int);
    position: relative;
}

    .i-dropdown-content.i-extext-content {
        display: none;
        margin-left: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

/*************** END ACTIONS (in this topic) CONTAINER *****************/


/*************** START BODY CONTAINER *****************/
/* Most of the rules that affect the basic body content elements, like <p>, lists, and tables are 
in the BASE ELEMENTS section toward the top of this file */

/* This div has the i-content-width-container class applied, and that rule sets the max width and margins */
#i-body-content-container {
    grid-area: mn;
    width: 100%;
    padding: 0 var(--space-large);
    min-width: 0;
    min-height: auto;
}

#i-body-content {
    position: relative;
    overflow-y: auto;
    width: 100%;
}

    #i-body-content > :first-child {
        margin-top: 0;
        padding-top: 0;
    }

    /* This is the actions container that is INSIDE the body container for mobile. It's not the one in the right column in the grid. */

    #i-body-content .i-in-this-topic-container {
        /* Hidden for desktop. Overriden by media queries. */
        display: none;
        background-color: var(--color-box-bkg);
        padding: var(--space-regular);
    }

.i-see-also-link {
    display: block;
    margin: var(--space-small) 0;
}


/***    Start Family links?    ***/
/* I set the family/parent links styles up in case we decide to show them, but I'm
making them display none for now because I think they duplicate the breadcrumb. I don't know
how to make them appear in the output. May be a holdover from the tri-pane layout. */
.familylinks {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    display: none;
}
    /* from orbis connect */
    .familylinks:first-child {
        margin-top: var(--space-large);
    }
/* from orbis connect */
.parentlink strong {
    color: var(--color-text-sec);
    font-weight: var(--font-weight-regular);
    margin-right: 2px;
}

.related-links {
    border-radius: var(--bdr-radius);
    background: #F6F3F3;
    margin-top: 55px;
}

.ulchildlink {
    font-size: var(--font-size-small);
}
/**  End family links    ****/

p.i-to-top {
    text-align: right;
    font-size: var(--font-size-tiny);
    line-height: var(--line-height-tiny);
    max-width: 100%;
}

/*************** END BODY CONTAINER *****************/


/*************** START FOOTER CONTAINER *****************/

#i-footer-content {
    grid-area: ft;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    background-color: var(--color-footer-bkg);
    color: var(--color-footer-text);
    z-index: 10;    
}

footer {
    display: grid;
    position: relative;
    row-gap: 0;
    grid-auto-rows: auto;
    grid-auto-columns: minmax(0, var(--con-hz-margins)) minmax(0,max-content) 1fr 8rem 8rem minmax(0, var(--con-hz-margins));
    grid-template-areas:
        ". flg fic fic fic ."
        ". fpc fpc fpp fpf .";
    /* flg is the footer logo container, fic is the footer icons paragraph, fpm is the placeholder for the copyright, privacy, and feedback link paragraphs. */
    font-size: var(--font-size-tiny);
    line-height: var(--line-height-tiny);
}

    footer a, footer a:link {
        grid-column: 1 / span 6;
        vertical-align: middle;
        grid-area: fpf;
        display: grid;
    }

        footer a:visited {
            color: whitesmoke;
        }

        footer a:hover {
            color: white;
        }

.footer-text {
    grid-area: fic;
    grid-column: 2 / span 3;
    text-align: center;
}

#footer-logo-container {
    grid-area: flg;
    margin-top: var(--space-large);
    margin-bottom: var(--space-regular);
}

#footer-logo {
    width: 200px;
}

.footer-icons {
    grid-area: fic;
    max-width: unset;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

    .footer-icons a {
        text-decoration: none;
        margin-right: var(--space-large);
    }

        .footer-icons a:last-child {
            margin-right: 0;
        }

.social_icons {
    width: var(--header-btn-size);
}

footer p {
    display: grid;
    max-width: unset;
    align-content: center;
}

.i-copyright {
    grid-area: fpc;
    justify-content: start;
}

.i-privacy-link {
    grid-area: fpp;
    justify-content: end;
    margin-right: 10%;
    vertical-align: middle;
}

.i-feedback-link {
    grid-area: fpf;
    justify-content: end;
    vertical-align: middle;
}

p.i-feedback-link a:link, p.i-feedback-link a {
    color: white !important;
}

#i-footer-content .i-feedback-link:not(a) {
    color: white !important;
    grid-column: 1 / span 6;
    text-align: left;
}

#i-footer-content:not(a) {
    color: white !important;
    text-align: left;
}

#i-footer-content a {
    color: white !important;
    text-align: left;
}

#i-footer-content .i-feedback-link a:link, #i-footer-content .i-feedback-link a {
    color: white !important;
    grid-column: 1 / span 6;
    text-align: left;
}

#i-footer-content a:link:visited, #i-footer-content a:visited {
        color: whitesmoke !important;
    }
/* Container for the Community feature if used. */
#i-comments-container {
    background-color: #ffffff;
    padding: 0 var(--space-large);
}

/*************** END FOOTER CONTAINER *****************/


/******** START SEE ALSO and COLLAPSIBLE HEADING widget *************/

/* The content container below the section heading */
.i-section-content {
}

/* Don't know what this is. It's not output in the template test project files */
.i-description-content {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Don't know what this is. It's not output in the template test project files. And
we don't output See Also as a heading 4 anymore. */
/* From topics.css: Avoid double spacing in Returns content */
h4 + .i-returns-content,
.i-returns-content-after-heading {
    padding-top: 0;
    padding-bottom: 0;
}

/* From topics.css: Remove the padding from before the first element in a section so that the 
   spacing is consistent for just text and paragraphs.
Removed selectors for i-section-content because we don't need them. In section-content, the
child elements are in <p> tags that have their own margins and we don't need to change them. */
/*  */
.i-description-content > :first-child,
.i-returns-content > :first-child,
.i-description > :first-child,
.i-description-content .i-first-child,
.i-returns-content .i-first-child,
.i-description .i-first-child {
    padding-top: 0;
    margin-top: 0;
}
/* Removed selectors for i-section-content because we don't need them. */
.i-description-content > :last-child,
.i-returns-content > :last-child,
.i-description > :last-child,
.i-description-content .i-last-child,
.i-returns-content .i-last-child,
.i-description .i-last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Don't know what this is. It's not output in the template test project files */
/* From topics.css: Avoid a double separating space when an example immediately follows the example intro text */
.example-section-content p + div,
.i-example-after-paragraph {
    padding-bottom: 0;
    margin-bottom: 0;
}


/* START Table with Copy Code function */

table.i-syntax-table th:first-child,
table.i-syntax-table th.i-first-child {
    border-right: none;
}

table.i-syntax-table th.i-last-child {
    border-left: none;
    text-align: right;
}

table.i-syntax-table th:last-child {
    border-left: none;
    text-align: right;
}

/* From topics.css: Required for zClip positioning */
.i-copy-code-wrapper {
    position: relative;
}

.i-copy-code {
    cursor: pointer;
    color: var(--color-int);
    padding-left: var(--space-medium);
    background-image: url("../images/i-copy-code.svg");
    background-repeat: no-repeat;
    background-position-y: 50%;
}

/* END Table with Copy Code function */





/* Theme Selection */
/* from topics.css */
.i-theme-selection-container {
    display: inline-block;
}

#i-actions-container .i-theme-selection-container {
    margin-top: 12px;
}


/* from topics.css */
.i-light-select {
    height: 24px;
    border: 1px solid #e3e3e3;
    background-image: -webkit-linear-gradient(45deg, transparent 50%,#707070 0),-webkit-linear-gradient(315deg, #707070 50%,transparent 0);
    background-image: linear-gradient(45deg, transparent 50%,#707070 0),linear-gradient(135deg, #707070 50%,transparent 0);
    background-position: calc(100% - 10px) 8px, calc(100% - 6px) 8px;
    background-size: 5px 5px,5px 6px;
    background-repeat: no-repeat;
    padding: 0 24px 0 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* from topics.css */
.i-theme-select {
    margin-left: 5px;
    position: relative;
    top: -0.5px;
}

/* Built in In This Topic styles "*/
/* from topics.css */
body.i-editor .i-in-this-topic-container {
    display: none;
}


/* End of built in In This Topic styles "*/


/* Somewhere in the build of popups and qtips, inline styles get added to the qtip boxes
and they use !important to set styles. This makes them virtually impossible to override.
Even if I add rules to this stylesheet and set everything to !important to override the
inlines, it still won't override the !importants in the inline. Here are the inline settings
on the div class="qtip-tip":
element.style {
    background-color: transparent !important;
    border: 0px !important;
    width: 8px;
    height: 8px;
    line-height: 8px;
    top: 50%;
    margin-top: -4px;
    right: -8px;
}

And then on the <canvas> element inside that div:
element.style {
    background-color: transparent !important;
    border: 0px !important;
    width: 8px;
    height: 8px;
}


*/







/* Popups */
/* from topics.css */
.i-popup-content {
    display: none;
}
/* from topics.css */
.qtip, .ui-tooltip {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}
/* from topics.css */
.qtip-default,
.ui-tooltip-default .ui-tooltip-titlebar,
.ui-tooltip-default .ui-tooltip-content {
    background-color: var(--color-popup-bkg);
    border-color: var(--color-popup-bdr);
}
    /* from topics.css */
    .qtip-default .qtip-titlebar,
    .ui-tooltip-default .ui-tooltip-titlebar {
        background-color: var(--color-popup-bkg);
    }
/* from topics.css */
.qtip-green,
.ui-tooltip-green .ui-tooltip-titlebar,
.ui-tooltip-green .ui-tooltip-content {
    background-color: var(--color-popup-bkg);
    border-color: var(--color-popup-bdr);
    color: var(--color-text);
}
    /* from topics.css */
    .qtip-green .qtip-titlebar,
    .ui-tooltip-green .ui-tooltip-titlebar {
        background-color: var(--color-popup-bkg);
    }
/* from topics.css */
.qtip-title, .ui-tooltip-title {
    margin: var(--space-tiny);
}
/* from topics.css */
.qtip-content, .ui-tooltip-content {
    padding: var(--space-tiny) var(--space-small);
}

/* from topics.css */
dd {
    margin-left: 2em;
}

.i-popup-link,
.i-function-link {
    cursor: pointer;
    display: block;
}

    .i-popup-link label,
    .i-function-link label {
        cursor: pointer;
    }

#i-actions-container .i-popup-link,
#i-actions-container .i-function-link {
    padding-left: var(--space-small);
    background-repeat: no-repeat;
    background-image: url("../images/i-expand-down.svg");
    background-position: left center;
}

/* from topics.css */
#i-actions-container .i-function-link,
#i-actions-container .i-page-link,
#i-actions-container .i-version-popup-link {
    margin-bottom: 8px;
}


/* Widget Overrides */


/* Tabs */
/* from topics.css */
.i-tab-container {
    background: transparent;
    border: solid 1px var(--color-box-bdr);
    padding: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin-bottom: 1em;
}
    /* from topics.css */
    .i-tab-container .ui-widget-header {
        background: transparent;
        border: none;
        border-bottom: solid 1px var(--color-box-bdr);
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }
    /* from topics.css */
    .i-tab-container .ui-state-default {
        background-color: transparent;
        border: none;
    }
    /* from topics.css */
    .i-tab-container .ui-state-active {
        border: none;
    }
    /* from topics.css */
    .i-tab-container .ui-tabs-panel,
    .i-tab-container > div {
        padding: 0;
        margin: 1em 0.85em 1em;
    }





    /* from topics.css */
    .i-tab-container .ui-tabs-nav li {
        font-family: var(--font-family-heading);
        font-weight: var(--font-weight-light);
        margin: 0 .2em 0 0;
        /*        font-weight: bold;*/
        line-height: 1.35em;
    }
        /* from topics.css */
        .i-tab-container .ui-tabs-nav li a,
        .i-tab-container .ui-tabs-nav li a.ui-tabs-anchor {
            padding: .6em .75em .5em .75em;
            outline: none;
            /*            text-transform: uppercase; */
        }
    /* from topics.css */
    .i-tab-container .ui-tabs-panel ul:first-child {
        display: none;
    }

    /* Tabs containing code */
    /* from topics.css */
    .i-tab-container .i-code {
        margin: 0;
        padding: 1em 0.85em 1em;
        background-color: var(--color-box-bkg);
    }
        /* from topics.css */
        .i-tab-container .i-code > .i-code {
            padding: 0;
        }

        /* Remove additional margin, padding and border from pre elements in tabs containing code */
        /* from topics.css */
        .i-tab-container .i-code pre {
            border: none;
            background: transparent;
            margin: 0;
            padding: 0;
        }
    /* from topics.css */
    .i-tab-container .ui-state-active,
    .i-tab-container .ui-state-default {
        color: transparent;
    }
/* from topics.css */
.i-tab-item-widget ui-tabs-panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid var(--color-box-bdr);
    border-bottom: 1px solid var(--color-box-bdr);
    border-left: 1px solid var(--color-box-bdr);
}
/* from topics.css */
.i-tab-container .ui-state-default a {
    color: var(--color-int);
}
/* from topics.css */
.i-tab-container .ui-tabs-nav li {
    font-size: .9em;
    font-weight: 300;
}
    /* from topics.css */
    .i-tab-container .ui-tabs-nav li a {
        margin-bottom: 3px;
    }
/* from topics.css */
.i-tab-container .ui-tabs-nav li {
    font-weight: normal;
}
/* from topics.css */
.i-tab-container .ui-state-default {
    border: none;
    font-weight: normal;
}
/* from topics.css */
.ui-tabs .ui-tabs-nav {
    padding: .2em 0 0;
}
    /* from topics.css */
    .ui-tabs .ui-tabs-nav li.ui-state-active {
        border-bottom: 2px solid var(--color-box-bdr);
        margin-bottom: -2px;
        padding-bottom: 0;
    }
/* from topics.css */
.i-tab-container .ui-state-active {
    background: none !important;
}
    /* from topics.css */
    .i-tab-container .ui-state-active a {
        color: var(--color-text);
    }

/* override jquery-plugins */
.ui-widget {
    font-size: inherit;
    font-family: inherit;
}

/* override jquery-plugins */
.ui-widget-content {
    border: 1px solid var(--color-bdr);
    background: inherit;
    color: inherit;
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--color-bdr);
}


/* Boxes */
/* from topics.css */
.i-box {
    margin: var(--space-regular) 0;
    border-left: 2px solid var(--color-box-bdr);
    background-color: var(--color-box-bkg);
    background-repeat: no-repeat;
    background-position: var(--space-tiny) var(--space-small-medium);
    background-size: 1em;
    padding: var(--space-small) var(--space-small) var(--space-small) var(--space-small);
    min-height: var(--space-medium);
    padding-left: 32px;
}

    /* from topics.css */
    .i-box > :first-child,
    .i-box .i-first-child,
    .i-box span#Content > :first-child,
    .i-box span#Content .i-first-child {
        padding-top: 0;
        margin-top: 0;
        margin-left: calc(var(--space-small));
    }
    /* from topics.css */
    .i-box > :last-child,
    .i-box .i-last-child,
    .i-box span#Content > :last-child,
    .i-box span#Content .i-last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }
/* from topics.css */
.i-box-note {
    background-image: url('../images/i-note.svg');
}
/* from topics.css */
.i-box-tip {
    background-image: url('../images/i-tip.svg');
}
/* from topics.css */
.i-box-caution {
    background-image: url('../images/i-caution.svg');
}
/* from topics.css */
/* Lightbox */
/* from topics.css */
.i-thumbnail-container {
    display: inline-block;
    background-color: var(--color-box-bkg);
    border: 1px var(--color-bdr-int) solid;
    max-width: 25%;
    padding: var(--space-tiny);
    margin: var(--space-regular) 0;
}

    .i-thumbnail-container img {
        border-style: none;
    }

    .i-thumbnail-container p {
        margin: var(--space-tiny);
        font-size: var(--font-size-tiny);
        line-height: var(--font-size-tiny);
    }




/* Versions Styling */
/* from topics.css */
.i-version-popup-link {
    margin-right: 3px;
}
/* from topics.css */
.i-version-selector ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 4px;
    margin-bottom: 4px;
}
/* from topics.css */
.i-version-selector .i-current-version {
    font-weight: bold;
}
/* from topics.css */
.i-version-selector .i-version-link {
    opacity: 0.5;
}
    /* from topics.css */
    .i-version-selector .i-version-link.i-discovered {
        opacity: 1;
    }
    /* from topics.css */
    .i-version-selector .i-version-link.i-unavailable {
        text-decoration: line-through;
    }

.i-key-sequence {
    display: inline-block;
}

    .i-key-sequence span.i-key {
        color: inherit;
        display: inline-block;
        text-align: center;
        background-color: var(--color-box-bkg);
        padding: var(--space-tiny) var(--space-small);
        padding-top: calc(var(--space-tiny) + 1px);
        margin-right: 1px;
        margin-bottom: 4px;
    }
/* from topics.css 
*+html .i-key-sequence span.i-key { display: table-cell; vertical-align: middle }
*/

/* End Widget Overrides */


/* Is New Highlight */

.i-is-new .i-page-title-text::after,
ul#i-dt-root li.i-is-new > a::after {
    vertical-align: top;
    color: var(--color-alert);
    margin-left: var(--space-small);
}

.i-is-new .i-page-title-text::after {
    font-size: var(--font-size-regular);
}

ul#i-dt-root li.i-is-new > a::after {
    font-size: var(--font-size-small);
}

ul#i-dt-root li.i-is-new.i-selected > a::after {
    color: var(--color-alert);
}


/* Design Time */
/* from topics.css */
.i-design-item-edit,
.i-design-item-delete,
.i-design-item-add {
    position: relative;
    left: 5px;
}
/* from topics.css */
.i-design-item-edit,
.i-design-item-delete {
    top: 2px;
}
/* from topics.css */
.i-design-item-add {
}
/* from topics.css */
.i-hidden {
    display: none;
}
/* from topics.css */
.i-editor .i-light-select {
    padding: 0;
    background: none;
    top: 0;
}
/* from topics.css */
/* I'd like to hide the .i-comments-container because it causes script errors on every topic you open, but adding it below doesn't work. */
.i-designtime .i-in-this-topic-container,
.i-designtime header {
    display: none !important;
}



/* from topics.css */
.i-designtime .WidgetProperty {
    box-sizing: border-box;
}
/* from topics.css */
.i-designtime .i-box {
    padding-right: 4px;
}

/* show action bar items at the top */
.i-designtime #i-actions-container {
    position: static;
}

.i-designtime #i-actions-content {
    position: static;
    width: auto;
    margin-top: 0;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: auto;
    padding-top: 0;
}

.i-designtime #i-actions-container .i-theme-selection-container {
    margin-top: 0;
    display: inline-block;
}

.i-designtime #i-actions-container .i-function-link,
.i-designtime #i-actions-container .i-page-link,
.i-designtime #i-actions-container .i-version-popup-link {
    margin-bottom: 0;
}

.i-designtime #i-actions-container span,
.i-designtime #i-actions-container a {
    display: inline;
}

.i-compiled #i-body-content,
.i-designtime #i-body-content {
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 8px;
    overflow-x: visible;
}



.i-compiled #i-body-content,
.i-editor #i-body-content {
    margin-left: 8px;
}

/* Hide the toc in the editor and compiled help */
/* I'd like to hide the .i-comments-container because it causes script errors on every topic you open, but adding it below doesn't work. */
.i-compiled #i-toc-container,
.i-editor #i-toc-container,
.i-compiled #i-index-button,
.i-editor #i-index-button,
.i-compiled .i-search-container,
.i-editor .i-search-container,
.i-editor .i-comments-container {
    display: none;
}




/* Dark Theme Common. All from topics.css. */

@media (prefers-color-scheme: dark) {
    :root {
        --color-body-bkg-dark: #17181a;
        --color-text-regular:;
        --color-text-sec:;
        --color-int: #76bf1d;
        --color-int-visited: #b08dd9;
    }

    html.i-dark body,
    html.i-dark .i-busy-overlay,
    #i-before-header-content,
    #page-grid,
    #i-header-container {
        color: #ccc;
        background-color: var(--color-body-bkg-dark);
    }

    /* Link coloring */

    html.i-dark a:link {
        color: #00a4f3;
    }


    html.i-dark a:visited,
    html.i-dark a.i-popup-link:visited,
    html.i-dark a,
    html.i-dark .i-link > a,
    html.i-dark .i-version-link > a {
        color: #00a4f3;
    }

    html.i-dark .i-after-header-content .i-popup-link,
    html.i-dark .i-after-header-content .i-function-link,
    html.i-dark #i-actions-container .i-popup-link,
    html.i-dark #i-actions-container .i-function-link {
        background-image: url("../images/i-dropdown-dark.png");
    }

    /* Boxes */

    /* Lightbox */
    html.i-dark .i-thumbnail-container {
        background-color: #2f2f2f;
        border-color: transparent;
        color: #ccc;
    }

        html.i-dark .i-thumbnail-container p {
            color: #ccc;
        }

    /* Common Colouring */

    html.i-dark .i-page-title,
    html.i-dark h1,
    html.i-dark h2,
    html.i-dark h3,
    html.i-dark h4,
    html.i-dark h5,
    html.i-dark h6,
    html.i-dark .i-section-heading,
    html.i-dark .i-see-also-sub-heading {
        color: #ccc;
    }

    html.i-dark h1, p.i-page-title-text {
        color: #ccc;
    }


    html.i-dark .i-project-title {
        color: #ccc;
    }

    /* Search highlight */
    html.i-dark .i-search-highlight {
        background-color: #685C00;
    }

    /* Table Header and cell borders */
    html.i-dark .i-body-content table th {
        background-color: #2f2f2f;
        color: #ccc;
    }

    html.i-dark .i-body-content table th,
    html.i-dark .i-body-content table td {
        border-left-color: #d0d0d0;
        border-right-color: #d0d0d0;
        border-top-color: #d0d0d0;
        border-bottom-color: #d0d0d0;
    }


    /* Drop down sections */
    html.i-dark .i-dropdown-heading,
    html.i-dark .i-show-all-dropdowns,
    html.i-dark .i-hide-all-dropdowns {
        color: #00a4f3;
    }

    /* This used to remove the icon from the link in the Expandable Text widget. Changed so that it shows an icon that 
  indicates that the content will expand to the right (when collapsed). */
    /*  html.i-dark .i-no-glyph {
    background-image: none;
  }*/

    html.i-dark .i-dropdown-heading,
    html.i-dark .i-show-all-dropdowns,
    html.i-dark .i-hide-all-dropdowns {
        background-image: url('../images/i-expand-to-right-dark.svg');
    }

    html.i-dark .i-dropdown-heading-expanded,
    html.i-dark .i-hide-all-dropdowns {
        background-image: url('../images/i-collapse-to-left-dark.svg');
    }

    /* In this topic link coloring */
    html.i-dark .i-in-this-topic .i-in-this-topic-root .i-in-this-topic-child-headings-always-visible #i-in-this-topic {
        color: #00a4f3;
    }

    /* Horizontal rule */
    html.i-dark hr {
        background: #2f2f2f;
    }

    /* Widget Overrides */
    html.i-dark .i-box {
        border-left-color: #00a4f3; /* this uses the link color */
        background-color: var(--color-box-bkg); /* #2f2f2f*/
        color: #ccc;
    }

    html.i-dark .i-tab-item-widget ui-tabs-panel {
        border-right-color: #333;
        border-bottom-color: #333;
        border-left-color: #333;
        background-color: #2f2f2f;
    }

    html.i-dark .i-in-this-topic-container {
        padding: 8px 8px 4px 6px;
        border-left: 2px solid #ccc;
        background-color: #2f2f2f;
    }

    html.i-dark #i-body-content .i-in-this-topic-container {
        background-color: #2f2f2f;
    }

    html.i-dark #mobile-nav-row #mobile-nav-actions {
        background-color: #2f2f2f;
    }

    html.i-dark ul#i-dt-root ul li.i-selected:not(:has(ins.i-expandorcollapse)) > ins {
        background-color: #1a1a1a;
    }

    html.i-dark .i-aside-heading {
        background-color: #1a1a1a;
    }

    html.i-dark .i-toc-content-scroll-container {
        background-color: #1a1a1a;
    }

    html.i-dark #i-toc-outer-container {
        background-color: #1a1a1a;
    }

    html.i-dark .i-box {
        background-color: #2f2f2f;
    }





    html.i-dark .i-in-this-topic-prefix {
        color: #ccc;
    }

    html.i-dark .i-in-this-topic-item {
        color: #ccc;
    }

    html.i-dark .ui-widget-content {
        color: #ccc;
    }

    /* Footer Overrides */
    html.i-dark .i-footer-content {
        background-color: #2f2f2f;
    }


    /* Disqus Specific Dark Theme*/

    html.i-dark iframe.easyXDM_default186_provider {
        color: #ccc !important;
    }

    /* Edition and Versions */

    /* Glossary Qtip */
    html.i-dark a.i-glossary-link {
        border-color: var(--color-int-dark);
        color: var(--color-int-dark);
    }

        /* Glossary Link */
        html.i-dark a.i-glossary-link,
        html.i-dark a.i-glossary-link:link,
        html.i-dark a.i-glossary-link:visited,
        html.i-dark a.i-glossary-link:hover
        html.i-dark a.i-glossary-link, a.i-popup-link
        html.i-dark .i-glossary-link .i-popup-link {
            border-color: var(--color-int-dark);
            color: var(--color-int-dark);
        }

    html.i-dark .i-version-popup-link {
        background-color: black;
        color: #ccc;
        border-color: #ccc;
    }

    html.i-dark .qtip-default {
        background-color: black;
        color: #ccc;
        border-color: #ccc;
    }

    html.i-dark .qtip-titlebar {
        background-color: #555;
        color: #ccc;
        border-color: #ccc;
    }

    html.i-dark .qtip-green {
        background-color: #CAED9E;
        border-color: #90D93F;
        color: #3F6219;
    }

        html.i-dark .qtip-green .qtip-titlebar {
            color: #3F6219;
            background-color: #B0DE78;
        }

    /* Copy Code */
    html.i-dark .i-copy-code {
        background-color: transparent;
        background-image: url("../images/i-copy-code-dark.svg");
    }

    /* Drop down section heading text */
    html.i-dark span.i-section-heading-text {
        color: #ccc;
    }

    html.i-dark .i-section-heading .i-section-heading-icon {
        background-image: url("../images/i-collapse-dark.svg");
    }

    html.i-dark .i-section-heading.i-section-heading-collapsed .i-section-heading-icon {
        background-image: url("../images/i-expand-dark.svg");
    }

    /* Dropdown heading link button colour */
    html.i-dark .i-dropdown-heading.btn {
        color: #00a4f3;
    }

    /* In This Topic List Buttons */
    html.i-dark .i-in-this-topic-link.btn {
        color: #00a4f3;
    }

    /* See Also Link Buttons */
    html.i-dark .i-see-also-link > a.btn {
        color: #00a4f3;
    }

    html.i-dark #i-search-button, #i-execute-search {
        background-image: url('../images/i-search-dark.svg');
    }

    html.i-dark #i-index-button {
        background-image: url('../images/i-index-dark.svg');
    }

    html.i-dark .i-box-note {
        background-image: url('../images/i-note.svg');
    }

    html.i-dark .i-box-tip {
        background-image: url('../images/i-tip.svg');
    }

    html.i-dark .i-box-caution {
        background-image: url('../images/i-caution.svg');
    }

    /* Footer Overrides */
    html.i-dark .i-footer-content {
        background-color: #1a1a1a;
    }

    /* Header Overrides */
    html.i-dark #i-index-button,
    html.i-dark #i-search {
        background-color: #1a1a1a;
    }

    /* End Dark Theme Common */

    /* In this Topic and RHFrame. All from topics.css */

    html.i-dark #i-actions-content {
        background-color: #1a1a1a;
    }

    html.i-dark .i-in-this-topic-container {
        border-left: 2px solid #1a1a1a;
        background-color: #1a1a1a;
    }

    html.i-dark ul.i-in-this-topic li > a {
        background-color: #303030;
        /* color: #00a4f3; */
        color: #ccc;
    }

    html.i-dark #i-body-content ul.i-in-this-topic li > a {
        color: #00a4f3;
    }

    html.i-dark ul.i-in-this-topic li.i-inthistopic-visible > a {
        border-left-color: #00a4f3;
        color: #00a4f3;
    }

    html.i-dark ul.i-in-this-topic li > a:hover {
        color: #ccc;
    }

    /* Toc */

    html.i-dark ul#i-dt-root,
    html.i-dark ul#i-dt-root ul {
        background-color: #1a1a1a;
        color: #ccc;
    }

        /* Toc Selector Highlight */

        html.i-dark ul#i-dt-root li.i-selected {
            background-color: #2f2f2f;
            color: #fff;
        }

        html.i-dark ul#i-dt-root a {
            color: #ccc;
        }

    /* Breadcrumbs */

    html.i-dark div.i-breadcrumbs-container {
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }

    /* Links */

    html.i-dark a:link,
    html.i-dark a.i-popup-link,
    html.i-dark a.i-popup-link:link {
        color: #00a4f3;
    }

    html.i-dark a.i-glossary-link {
        color: #90D93F;
    }

    /* Code Tabs */
    html.i-dark .i-tab-container .i-code {
        background-color: #1a1a1a;
    }

    html.i-dark .i-tab-container .ui-state-default a {
        color: #ccc;
    }

    html.i-dark .i-tab-container .ui-state-active a {
        color: #00a4f3;
    }

    html.i-dark .ui-tabs .ui-tabs-nav li.ui-state-active {
        border-bottom: 2px solid #00a4f3 !important;
        margin-bottom: -2px;
        padding-bottom: 0;
    }

    /* Code Tab style tab background */
    html.i-dark .ui-widget-header {
        background-color: #2f2f2f;
    }

    html.i-dark pre {
        background-color: #1a1a1a;
    }

    /* Editions and versions */
    html.i-dark span.i-version-popup-link {
        background-color: transparent;
    }
    /* End Dark Theme */
}

/* Design Time Styles */

div.hsedit {
    margin: 0px -5px 0px -5px;
    padding: 0px 5px 0px 5px;
    border: 1px dotted #d0d0d0;
    word-break: normal;
}

/* End Design Time Styles */


/* search and index pages */