/* This StyleSheet contains custom styles for this project */

#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 ."
        ". toc mn as . "
        "ft ft ft ft ft";
}

#i-header-container {
    /* background-color: var(--color-header-bkg); */
    grid-area: hd;
    border-bottom: 1px solid var(--color-bdr);
    margin-bottom: var(--space-tiny);
	background-image: url(https:///documentation.contiem.com/resources/orbis-connect-banner.png);
    background-size: cover;
    height: 360px;
    background-position: 250px 0;
}

#top-bar {
    grid-area: ah;
    display: grid;
    grid-auto-columns: minmax(0, var(--container-horizontal-margins)) auto minmax(0, var(--sidebar-max-width)) minmax(0, var(--container-horizontal-margins));
    background-color: white;
    grid-template-areas: ". mb tk .";
	border-bottom: 1pt solid #E6E6E3;
	margin-bottom: var(--space-regular);
}

#top-menu {
    font-family: var(--font-family-header-nav);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-top-nav);
    grid-area: mb;
    z-index: 10;
    padding: var(--space-extra-small) 0;
}

.prod-menu, .prod_dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.prod-menu > li:first-child {
    margin-left: 0;
    padding-left: 0;
}

.prod-menu > li {
    display: inline-block;
    margin: 0 var(--space-large);
    padding: var(--space-regular);
    position: relative;
}

#top-menu a {
    color: var(--color-headings);
    text-decoration: none;
}

#ticketing {
    position: relative;
    font-family: var(--font-family-header-nav);
    font-size: var(--font-size-regular);
    line-height: var(--line-height-top-nav-ticketing);
    grid-area: tk;
    padding: var(--space-small) 0 0;
    text-align: right;
}

#ticketing ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#ticketing ul a {
    font-weight: var(--font-weight-bold);
    color: #005518;
    font-size: var(--font-size-top-nav-ticketing);
    line-height: var(--line-height-top-nav-ticketing);
    text-decoration: none;
}
#i-breadcrumbs-outer-container {
    display: inline;
	grid-area: bc;
}

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

.logoimage {
    background-color: var(--color-header-title);
    border: 1pt solid var(--color-header-title);
    border-radius: 5px;
    max-width: 220px;
    margin: var(--space-large) 0 0;
    padding: var(--space-extra-small) 0 0;
  
}

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

.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";
    margin: var(--space-regular);
	align-items: unset;
}

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


/***************    Smaller desktops, browser width < 1500         *****************/

@media screen and (max-width: 1500px) {
  :root {
      /* This width will accommodate the expansion of the toc to five levels deep, but some
      longer words at lower levels may break in the middle of the word. */
    --sidebar-max-width: 270px;
    --con-hz-margins: 3%;
  }
  /* not using a header image right now */
  /*  .header-img {
    width: auto;
    max-height: unset;
    height: 100%;
  } */
}



/***************          Large tablets         *****************/

@media screen and (max-width: 1280px) {
  /* These are the default variable definitions for touch devices. 1280 is where we start touch device support.
  The TOC panel is still visible, but the actions panel moves to the top of the body content. */
  /* Any element that a user can tap must be a minimum of 44px wide and high to meet WAI 2.1 requirements.
  For phones, we use the WAI minimums and for larger tablets where we have more room available, the better, 
  finger-sized 57px width (still min 44 height), except in the TOC where the wider spacing isn't feasible.
  Measurements are for the whole touchable area, including padding around the visible target. It doesn't 
  mean icons have to be 57 pixels wide, or text has to be 44 pixels tall. Per WAI, targets "close to the 
  minimum size are surrounded by a small amount of inactive space." We use 8 px space between targets. */
  :root {
    --sidebar-max-width: 330px; /* This is as small as the TOC panel can be without breaking too badly when it has 4 levels */
    --con-max-width: 100%;
    --con-hz-margins: 2%;
    --touch-width: 57px; /* This is the ideal width that meets minimum thumb-width size. */
    --min-touch-width: 44px; /* This is the WAI min, which we use where the space won't allow the ideal size above. */
    --min-touch-height: 44px; /* This is the WAI min, which we use everywhere. */
    --min-target-spacing: 8px; /* This is the WAI min, which we use everywhere. */
    --icon-size: 1rem; /* equivalent to 20 px, this is usually usd for width with auto height. Only used for functional icons, not the social icons in footer. */
    --icon-topbtm-padding: calc((var(--min-touch-height) - var(--icon-size)) / 2); /* Add touch area space above/below icons. */
    --icon-lftrgt-padding: calc((var(--min-touch-width) - var(--icon-size)) / 2); /* Add touch area space to the left and right of icons. */ 
    --Atarget-topbtm-padding: calc((var(--min-touch-height) - var(--line-height-small)) / 2); /* Add touch area space above/below text links. */
    --Atarget-lftrgt-padding: var(--space-regular); /* Add touch area space left/right of text links in a horizontal row, like in the footer. */
    --bdr-radius: 1rem; /* Default for rounded elements like buttons and input boxes */
    --header-btn-size: var(--min-touch-width);
    --header-bdr-radius: 24px; /* because buttons in the header have to be bigger for touch areas, the radius needs
        to be bigger, too. */

    /* Adjust font sizes for headings to be smaller now that they're based on 18 px rem */
    --font-size-h6: 1.111rem; /* 20px, h6 */
    --line-height-h6: 1.511rem; /* font plus 0.4 */
    --font-size-h5: 1.222rem; /* 22px, h5 */
    --line-height-h5: 1.622rem; /* font plus 0.4 */
    --font-size-medium: 1.333rem; /* 24px, h4 */
    --line-height-medium: 1.733rem; /* font plus 0.4 */
    --font-size-large: 1.667rem; /* 30px, h3 */
    --line-height-large: 2.067rem; /* font plus 0.4 */
    --font-size-larger: 2rem; /* 36px, h2 */
    --line-height-larger: 2.4rem; /* font plus 0.4 */
    --font-size-giant: 2.223rem; /* 40px, h1, i-page-title on start page */
    --line-height-giant: 2.623rem; /* font plus 0.4 */
  }

  /* Resetting the base rem unit to 18px so we only need to change the default variable definitions for 
  headings and we don't need to change the variables assigned to various rules. All the rules keep the same 
  font size definitions, but the rem font size they're based on is larger, for better readability on smaller 
  screens, and better proportion with the white space required by WCAG minimum touch target sizes on touch 
  devices. */
  html,
  body {
    font-size: 106.06615%; /* establishes 18px as 1 rem */
  }

  #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(--con-max-margins));
    grid-template-areas:
    "hd hd  hd hd"
	"ah ah ah ah "
    ". bc bc bc ."
    ". toc mn mn "
    "ft ft  ft ft";
    /* hd is the <header> element, toc is the <nav> element for the dynamic toc outer container, mn is <main> element (body-content),  ft is i-footer-content div, NOT the <footer> element that is inside that div. For tablet and mobile, the actions <aside> element is inside the <main> element at the top. */
    }

  #i-header-container {
    margin-bottom: var(--space-medium);
  }
  
  #i-header-content {
    grid-auto-columns: minmax(0, var(--con-hz-margins)) minmax(0,max-content) 1fr 44% minmax(0, var(--con-hz-margins));
  }

  .logoimage {
    max-width: 220px;
	margin-left: 50%;
	margin-right: 50%
  }

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

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

  #i-search-button, #i-execute-search {
    padding: var(--icon-topbtm-padding) var(--icon-lftrgt-padding);
    margin-left: var(--min-target-spacing);
  }
  
  #i-index-button {
    height: var(--header-btn-size);
    width: var(--header-btn-size);
    border-radius: var(--header-bdr-radius);
}
  
  #i-body-content-container {
    padding: 0;
  }

  /**** Hide the actions container in the right column ****/
  #i-actions-outer-container {
    display: none;
  }

  /* Show the in this topic container at the top of the body content */
  #i-body-content .i-in-this-topic-container {
    display: block;
    border-radius: var(--bdr-radius);
    margin-top: var(--space-regular);
  }

  #i-body-content ul.i-in-this-topic-root {
    background: transparent; /* why? */
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }

  #i-body-content ul.i-in-this-topic-root li {
    margin-top: 0;
    margin-bottom: var(--min-target-spacing);
  }

  /* remove bottom margin on last item in box */
  #i-body-content ul.i-in-this-topic-root li:last-of-type {
    margin-bottom: 0;
  }

  #i-body-content ul.i-in-this-topic li > a {
    border: none;
    padding: var(--Atarget-topbtm-padding) 0;
    min-height: var(--min-touch-height);
    min-width: var(--min-touch-width);
  }
  
  #i-body-content ul.i-in-this-topic li.i-heading-level-3 > a {
    padding-left: var(--space-medium);
  }
  
  #i-body-content ul.i-in-this-topic-root ul {
    margin-top: var(--min-target-spacing);
  }

  /**** end action container ***/  


  table, caption, th, td {
    font-size: var(--font-size-small);
    line-height: calc(var(--line-height-small)*0.9);
  }

  .i-see-also-link a {
    display: inline-block;
    min-height: var(--min-touch-height);
    padding: var(--Atarget-topbtm-padding) 0;
  }

  .i-to-top a {
    display: inline-block;
    min-height: var(--min-touch-height);
    padding: var(--Atarget-topbtm-padding) 0;
  }
  
  /*****     FOOTER     *****/
  footer a {
    display: inline-block;
    margin: 0 var(--min-target-spacing) 0;
    min-height: var(--min-touch-height);
    min-width: var(--touch-width);
    padding: var(--Atarget-topbtm-padding) var(--Atarget-lftrgt-padding);
  }

  footer > * > a:first-of-type {
    margin-left: 0;
  }

  footer > * > a:last-of-type {
    margin-right: 0;
  }

  .footer-icons {
    margin-top: var(--min-target-spacing);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .i-privacy-link {
    margin-right: 15%;
    vertical-align: middle;
  }

}



/***************         Small tablets and large mobile        *****************/

@media screen and (max-width: 980px) {

/* Add mobile nav and remove the TOC, overlay takes up 75%??? */
  

  /* From orbis connect */
  :root {
    /* --sidebar-max-width: 50%;  why do we need to redefine the sidebar max width when there are no sidebars in mobile? */
  }


 #page-grid {
    display: grid;
    position: relative;
    top: 0;
    min-width: 100%;
    min-height: 0;
	padding: var(--space-tiny);
    grid-template-columns: minmax(0, var(--con-hz-margins)) minmax(0, var(--con-max-width)) minmax(0, var(--con-max-margins));
    grid-template-rows: var(--min-touch-height) auto;
    grid-template-areas:
        "mr mr mr"
        "hd hd hd"
		"ah ah ah"
        "bc bc bc"
        "mn  mn mn"
        "ft ft ft";
       /* mr is the mobile-nav-row <div>, hd is the <header> element, bc is the breadcrumb container, mn is <main> element (body-content), ft is i-footer-content div, NOT the <footer> element that is inside that div. For tablet and mobile, the actions <aside> element is inside the <main> element at the top. */
  }
  /* Turn on and style the mobile-only nav bar at the top of the page that contains the toc link. */
  #mobile-nav-row {
    display: block;
    grid-area: mr;
    position: fixed;
    top: 0;
    z-index: 15;
    width: 100%;
    min-height: var(--min-touch-height);
    background-color: white;
  }

  #mobile-nav-actions {
    background-color: var(--color-box-bkg);
    border-bottom: 1px solid var(--color-bdr);
    height: max-content;
  }

  #mobile-nav-actions a {
    display: flex; /* needed to vertically align contents so icon and text inside link are vertically centered. */
    align-items: center; 
    justify-content: flex-start;
    text-decoration: none;
    font-size: var(--font-size-regular);
    min-width: var(--touch-width);
    min-height: var(--min-touch-height);
    margin: 0 var(--con-hz-margins);
    padding: var(--space-tiny) 0;
  }

  #mobile-nav-actions a img {
    height: calc(var(--icon-size) * 2); /* icon size plus extra padding */
    padding: var(--space-tiny);
    border: 1px solid var(--color-int);
    border-radius: var(--bdr-radius);
    margin-right: var(--space-small);
  }

  #i-header-container {
    margin-bottom: var(--space-small);
  }

   
   #i-header-content {
    grid-auto-rows: auto;
    grid-auto-columns: minmax(0, var(--con-hz-margins)) minmax(0, min-content) 1fr minmax(0, var(--con-hz-margins));
    grid-template-areas:
        "lg lg . ."
		". hb hb ."
        ". pt pt .";
    margin-top: var(--space-regular);
  }
  
  
  
  
/* Not using a header image right now
  .header-img {
    grid-area: 1 / 1 / 4 / -1;
    object-fit: cover;
    height: 100%;
  }
*/

  #logo-container {
    margin: 0;
  }
  
  .logoimage {
    max-width: 220px;
	margin-left: 50%;
	margin-right: 50%
  }

  #i-project-title {
    margin: var(--space-regular) auto var(--space-large);
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
  }

  .i-header-buttons-container {

  }

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

  #i-index-button {
    vertical-align: top;
    margin-left: var(--space-regular);
}


  /* Turn on and style the breadcrumbs bar */
  #i-breadcrumbs-outer-container {
    display: block;
    grid-area: bc;
    text-align: left; /* was right in orbis connect */
    margin-bottom: var(--space-large);
  }

  #i-toc-outer-container {
    z-index: 100;
    grid-area: unset;
    position: fixed;
    top: 50px;
    left: var(--space-small);
    width: 60%;
    padding: var(--space-small);
    border: 1px solid var(--color-bdr); 
    border-radius: var(--bdr-radius);
    background-color: white; /* from orbis connect */
    max-height: 93vh;
    overflow-y: scroll;
  }

  /* class on the outer container when the toc is hidden */
  .toc {
    display: none;
  }

  /* class on the outer container when the toc is visible */
  .toc.opened {
    display: block;
  }

  #i-toc-outer-container.opened > button.i-close-toc { 
    position: absolute;
    right: var(--space-tiny);
    top: 0;
    display: inline-flex;
    min-height: var(--min-touch-height);
    min-width: var(--min-touch-width);
    padding: var(--space-small);
    background: url("../images/i-close.svg") no-repeat center/var(--icon-size);
    z-index: 50;

  }
  

  /* from topics max width 769 */
  .i-toc-content-scroll-container {
    max-height: 100%;
    overflow-y: hidden;
  }
  
  #i-toc-content {
    max-width: unset;
  }

  #i-dynamic-toc-container .i-aside-heading {
    display: none
  }

  .i-compiled #i-body-content {
     overflow-x: auto;
  }
  
  
}
  
  
  
  
  
  
  
  /***************    Mobile         *****************/

@media screen and (max-width: 768px) {

  #i-header-content {
    grid-auto-rows: auto;
    grid-auto-columns: minmax(0, var(--con-hz-margins)) minmax(0, min-content) 1fr minmax(0, var(--con-hz-margins));
    grid-template-areas:
        "lg lg . ."
		". hb hb ."
        ". pt pt .";
    margin-top: var(--space-regular);
  }
   .logoimage {
    max-width: 220px;
	margin-left: 50%;
	margin-right: 50%
  }
  
  .i-search-container {
    width: 100%;
    max-width: unset;
  }
  
  #i-search {
    width: auto;
    max-width: calc(100% - calc(var(--header-btn-size) + var(--space-regular)));
  }
  
  #i-toc-outer-container {
    width: 96%;
  }


  /****** Below taken from topics.tablet and topics.mobile ******/

  /* Responsive Common */

.i-loading {
    display: none;
}
  
  /* Custom "In This Topic" Styles. Don't exist anywhere else, so I don't think they're used in our layout. */
ul.i-in-this-topic-list {
    list-style-type: none;
    padding-left: 0;
}

li.i-in-this-topic-item {
    margin-top: 1em;
    margin-bottom: 1em;
}
  
  
  /* Remove custom padding to allow for icon as not visible in responsive mode */
.i-copy-code {
    padding-left: 6px;
}

  /* Remove padding as no glyph visible in responsive mode */
.i-show-all-dropdowns,
.i-hide-all-dropdowns {
    padding-left: 0;
}

  /* Restrict width of images to width of viewport */
.i-thumbnail-container img {
    max-width: 100%;
}
 
  
  /* Spacing between drop down header and content */
.i-dropdown-content {
    margin-bottom: 1.5em;
    margin-top: 1em;
}

/* .. but not for expandable text widget content */
span.i-dropdown-content {
    margin-bottom: 0;
    margin-top: 0;
}

/* Normalize style of buttons to override any conflicting styles applied otherwise */
  /* There are no btn rules at all in topics.css except in the dark theme */
a.btn, p.btn, div.btn {
    text-align: center;
    padding-left: 10px;
    color: #1364C4;
    background-position-y: 0;
}

/* Ensure that correct left padding is always applied for mini buttons */
a.btn-mini {
    padding-left: 6px;
}

/* Adjust position so that alignment with text is correct */
.btn-mini {
    position: relative;
    top: -1px;
}

/* Remove gradients, shadows and corners from buttons */
.btn {
    background-image: none!important;
    border-color: #ccc;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    box-shadow: none!important;  
    text-shadow: none!important;  
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
    border-radius: 0!important;
}

/* Ensure that correct padding is always applied for buttons in See Also sections etc. */
.i-section-content .btn {
    padding: 4px 10px 4px;
}

/* Expandable Text button inline flow and vertically aligned with text */
.i-dropdown-heading.btn.i-no-glyph {
    display: inline-block;
    margin-top: -3px;
}

/* Responsive Tablet Common */

/* Extra margin around section headings */
.i-section-heading {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Increase margin and heading for items on popups */
.i-popup-content input,
.i-popup-content label {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 150%;
}

#i-after-header-content {
    margin-top: 6px;
    margin-left: 4px;
}

.i-responsive-container {
    margin-left: -10px;
}

/* Restrict image to width of the viewport */
img {
    max-width: 100%;
}

/* Ensure that dropdown heading buttons don't render inline */
.i-dropdown-heading.btn {
    display: table;
}

/* Responsive Tablet Topics */

.i-glossary-header a {
    margin-left: 4px;
    margin-right: 4px;
}

.i-toggle-all-sections {
    margin-top: 8px;
    margin-bottom: 8px;
}

#i-after-header-content span.i-toggle-all-sections {
    margin-left: 6px;
}

#i-seealso-section-content a {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.i-in-this-topic-item {
    text-indent: inherit;
    padding-top: inherit;
    padding-right: inherit;
    padding-bottom: inherit;
    padding-left: inherit;
}

/* Responsive Navigation Header */

  .i-navigation-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 39px;
    width: 100%;
    z-index: 100;
    background-color: whitesmoke;
    border-bottom: 1px solid #d8d8d8;
  }

  .i-navigation-header>.i-inner-container {
    float: left;
    position: relative;
    left: 50%;
    margin-left: -117px;
    margin-top: 3px;
    top: 8px;
  }

  .i-navigation-header>.i-inner-container a {
    padding: 0.5em 1.2em;
    border-right-color: #ccc;
    border-right-width: 1px;
    border-right-style: solid; 
  }

  .i-navigation-header>.i-inner-container a:nth-child(1n+5) {
    border: none;
  }

  a#i-remove-highlighting {
    margin-left: 0;
    display: none;
  }

  a#i-remove-highlighting i {
    margin-top: 2px;
  }

  body {
    margin-top: 4em;
  }

  body.i-navigation-inpage {
    margin-top: 0;
  }

  .i-navigation-header .btn {
    vertical-align: inherit;
  }

  .i-navigation-header .btn-warning,
  .i-navigation-header .btn-warning:hover,
  .i-navigation-header .btn-warning:active {
    background-color: #FFEA32;
  }

}



/* from topics.css */
.i-box-note {
   padding-left: 36px;
}
.i-box-tip {
    padding-left: 36px;
}
.i-box-caution {
    padding-left: 36px;
}
#i-actions-container .i-function-link, #i-actions-container .i-page-link, #i-actions-container .i-version-popup-link {
    margin-bottom: 8px;
    padding-left: 25px;
}
 #i-body-content img {
 border:0
    }
	:root {
    --color-int: #002e5d;
   }
   #i-body-content li {
    max-width: fit-content;
}
p {
    max-width: fit-content;
}
#i-body-content li {
    max-width: fit-content;
}
.i-box > :first-child, .i-box .i-first-child, .i-box span#Content > :first-child, .i-box span#Content .i-first-child {
        margin-left: 0;
		}
		footer a, footer a:link {
    color: #ffffff;
    }
@media (prefers-color-scheme: dark) { 
 .i-page-title-text, i-box-tip {
        color: #ccc !important;
}
#i-toc-outer-container {
        position: relative;
    }

.NewStyle
{
    list-style-type: lower-alpha;
}