/**********************************************
This is a streamlined update to ETC_Styles that 
no longer requires importing multiple 
stylesheets and is organized by class instead 
of by medium. This will be more human-readable
in LESS and less human-readable in CSS, but
should make maintenance easier if we need to 
update a certain class across multiple mediums
**********************************************/
/**********************************************
Import colors & fonts variables
**********************************************/
@import "ETC_Styles.css";
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
@media OnlineSource_Light {
  body {
    --colorBodyTextOS: #333333;
    --colorBackgroundOS: #e5e5e5;
    --colorRedOS: #b22424;
    --colorYellowOS: #ccb129;
    --colorGreenOS: #146630;
  }
}
@media OnlineSource_Dark {
  body {
    --colorBodyTextOS: #e5e5e5;
    --colorBackgroundOS: #262524;
    --colorGoldOS: #c78b05;
    --colorRedOS: #e55c5c;
    --colorYellowOS: #ffe566;
    --colorGreenOS: #3d995c;
  }
}
@media OnlineSource_Light {
  body {
    --fonth1OS: normal 700 48px/54px source-sans-pro, sans-serif;
    --fonth2OS: normal 700 36px/48px source-sans-pro, sans-serif;
    --fonth3OS: normal 700 28px/32px source-sans-pro, sans-serif;
    --fonth4OS: normal 700 24px/27px source-sans-pro, sans-serif;
    --fonth5OS: normal 700 18px/20px source-sans-pro, sans-serif;
    --fonth6OS: normal 700 16px/18px source-sans-pro, sans-serif;
  }
}
@media OnlineSource_Dark {
  body {
    --fonth1OS: normal 600 48px/54px source-sans-pro, sans-serif;
    --fonth2OS: normal 600 36px/48px source-sans-pro, sans-serif;
    --fonth3OS: normal 600 28px/32px source-sans-pro, sans-serif;
    --fonth4OS: normal 600 24px/27px source-sans-pro, sans-serif;
    --fonth5OS: normal 600 18px/20px source-sans-pro, sans-serif;
    --fonth6OS: normal 600 16px/18px source-sans-pro, sans-serif;
  }
}
/*if you add a variable here, you also need to 
add the same variable to _fonts_RAYN.less*/
/**********************************************
Import stylesheet
**********************************************/
/***********************************************
README
SideFlex is built on MadCap's Herschel template.
This file contains both the overrides and customized
Herschel CSS.

This file imports ETC_Styles.css. If you are importing
SideFlex.css into your own custom stylesheet, 
do not import ETC_Styles.css again.
***********************************************/
/***********************************************
Media query lists
***********************************************/
/***********************************************
Overrides specific to SideFlex
***********************************************/
body {
  max-width: 1200px;
}
div.topic-hero {
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  min-height: 6vw;
  padding: 1% 1% 1% 2%;
  background-color: black;
  border-bottom: 6px solid #1191c2;
}
div.topic-hero h1 {
  font-size: 48pt;
  padding-bottom: 0;
  color: #dcdee0;
  margin-top: 8px;
}
@media only screen and (max-width: 1279px) {
  div.topic-hero h1 {
    font-size: 5vw;
  }
}
/*home template page flexbox styling*/
div.flex-body-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
}
@media only screen and (max-width: 1279px) {
  div.flex-body-container {
    flex-direction: column;
  }
}
div.flex-body-container div#mc-main-content {
  flex: 1 1 auto;
  width: auto;
  max-width: 80%;
}
div.home-footer {
  background-color: #020202;
  padding: 2% 2%;
}
div.home-footer a {
  color: white;
}
div.home-footer table {
  width: 100%;
}
div.home-footer table td:nth-child(2) {
  text-align: right;
}
div.home-footer td:nth-child(1) {
  width: 75%;
}
div.home-footer img {
  max-width: 100px;
}
div.home-section:last-child {
  border-bottom: none;
}
div.home-section-flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}
div.home-section-flexbox > div {
  background-color: #dcdee0;
  padding: 2%;
  flex: 1 1 auto;
}
div.home-tiles-flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border-radius: 10px;
}
div.tile-content-flexbox {
  flex: 4 1 auto;
  width: 300px;
  min-width: 300px;
}
div.tile-icon-flexbox {
  flex: 1 1 auto;
  width: 50px;
  min-width: 50px;
}
/*styling footer*/
p.title-page-url {
  border-top: 1px solid gray;
  margin-top: 4em;
  padding-top: 0.5em;
}
/*end home page styling*/
/*manipulating the left navigation menu arrows*/
.submenu-toggle-container[aria-expanded='false'] > span.submenu-toggle,
.is-accordion-submenu-parent > a[aria-expanded='false'] > .submenu-toggle-container > span.submenu-toggle {
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.submenu-toggle-container[aria-expanded='true'] > span.submenu-toggle,
.is-accordion-submenu-parent > a[aria-expanded='true'] > .submenu-toggle-container > span.submenu-toggle {
  -webkit-transform-origin: none;
  transform-origin: none;
  -webkit-transform: none;
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
/*Herschel has a bug where the header width is affected by the Content Security Checkbox (when selected)*/
.title-bar.tab-bar.sticky.is-stuck.is-at-top,
.title-bar.tab-bar.sticky.is-anchored.is-at-top {
  width: 100% !important;
}
.title-bar-layout a.logo {
  background-size: contain;
  background-position: left center;
  min-width: 200px;
  min-height: 150px;
  display: flex;
  width: 100%;
  background: transparent url(../Images/Common/ETC_4c_rev.svg) no-repeat center center;
  /*the skin uses a png version of this file because the skin editor will not accept an SVG
        or at least the code behind Flare will not copy an SVG to the appropriate output directory on build*/
  background-position: 20px;
}
@media only screen and (max-width: 1279px) {
  .title-bar-layout a.logo {
    height: auto;
    min-height: 100px;
    background-position: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .title-bar-layout a.logo {
    min-height: 75px;
    background-position: 5px;
  }
}
.title-bar-layout .logo-wrapper {
  min-height: 100px;
  flex-basis: 25%;
}
@media only screen and (max-width: 1279px) {
  div.height-container-sidenav.height-container {
    min-height: 100vh !important;
  }
}
div.MCRelationshipsProxy_0 {
  flex: 1 0 auto;
  width: auto;
  height: fit-content;
  margin-left: 0;
  border-image: linear-gradient(to bottom, black, lightgray) 1 / 4px;
  border-image-width: 0 0 0 4px;
  border-top-style: none;
  position: sticky;
  padding-right: 15px;
  padding-bottom: 15px;
  top: 100px;
}
@media only screen and (max-width: 1279px) {
  div.MCRelationshipsProxy_0 {
    top: auto;
    border-image: linear-gradient(to right, black, lightgray) 1 / 4px;
    border-image-width: 4px 0 0 0;
  }
}
div.MCRelationshipsProxy_0 a {
  text-decoration: none;
}
@media only screen and (max-width: 1279px) {
  div.off-canvas-content.inner-wrap {
    box-shadow: none;
  }
}
@media only screen and (max-width: 767px) {
  div.quick-links > div:nth-child(1) {
    width: 49%;
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  ddiv.quick-links > div:nth-child(2),
  div.quick-links > div:nth-child(4) {
    width: 49%;
    margin-left: 2%;
  }
}
@media only screen and (max-width: 767px) {
  div.quick-links > div:nth-child(3) {
    width: 49%;
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  div.quick-links img {
    width: 150px;
  }
}
@media only screen and (max-width: 1279px) {
  html.home-topic .body-container {
    margin-left: 0;
  }
}
MadCap|dropDownHotspot {
  color: #242a2e;
  font-size: 17px;
}
@media only screen and (max-width: 1279px), only screen and (max-width: 767px) {
  MadCap|dropDownHotspot {
    font-size: 15px;
  }
}
@media only screen and (max-width: 1279px) {
  nav.title-bar .menu-icon {
    top: 35%;
  }
}
/*scaling font and changing hover color in the hamburger menu*/
ul.off-canvas-list li {
  font-size: 0.9em;
  text-align: left;
}
@media only screen and (max-width: 1279px) {
  ul.off-canvas-list li {
    font-size: 0.9em;
    line-height: 1em;
  }
}
ul.off-canvas-list li a:hover {
  color: #1191c2;
}
ul.sidenav li a {
  /*left align the side menu first level
        other levels are left aligned properly by the skin*/
  text-align: left;
  /*changing selected color to stay blue*/
}
ul.sidenav li a.selected {
  color: #1191c2;
}
ul.sidenav li a:hover,
ul.sidenav ul li a:hover,
ul.sidenav ul ul li a:hover,
ul.sidenav ul ul ul li a:hover,
ul.sidenav ul ul ul ul li a:hover,
ul.sidenav ul ul ul ul ul li a:hover {
  /*changing hover color sidenav menu */
  background-color: #242a2e;
  color: #1191c2;
}
/************************************************************************
End overrides for SideFlex
************************************************************************/
/************************************************************************
Standard Herschel below here, with minor modifications as indicated
************************************************************************/
body {
  color: #242a2e;
}
.body-container {
  padding-left: 2%;
  padding-top: 2%;
}
/*Flare comment: Backmatter*/
div.GlossaryPageDefinition {
  font-size: 10pt;
}
div.GlossaryPageHeading {
  font-size: 21pt;
  font-weight: normal;
  margin-bottom: 15px;
  margin-top: 15px;
  border-bottom-color: #7a858c;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-align: left;
  color: inherit;
  padding-left: 10px;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-right: 10px;
  background-image: url('../Images/Backmatter-Heading-Background.png');
  background-repeat: no-repeat;
}
div.GlossaryPageTerm {
  font-size: 12pt;
  font-weight: bold;
  padding-bottom: 10px;
  padding-top: 10px;
}
MadCap|glossaryProxy {
  border-top: none;
}
MadCap|indexProxy {
  border-top: none;
}
p.Index1 {
  font-size: 10pt;
  font-weight: bold;
}
p.Index2 {
  font-size: 10pt;
  font-weight: normal;
}
p.IndexHeading {
  font-size: 21pt;
  font-weight: normal;
  margin-bottom: 15px;
  margin-top: 15px;
  border-bottom-color: #7a858c;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-align: left;
  color: inherit;
  padding-left: 10px;
  padding-bottom: 20px;
  padding-top: 12px;
  padding-right: 10px;
  background-image: url('../Images/Backmatter-Heading-Background.png');
  background-repeat: no-repeat;
}
/*Flare comment: Content*/
img {
  border: none;
  max-width: 100%;
}
/*p from Herschel removed because it was interfering with our notes/cautions/warnings*/
p.table-text {
  font-size: 12pt;
}
/*Flare comment: Frontmatter*/
hr.title-page {
  border: solid 0px transparent;
  background-color: #dcdee0;
  height: 1px;
  width: 100%;
  margin-bottom: 30px;
  margin-top: 370px;
}
MadCap|tocProxy {
  border-top: none;
  margin-right: 0.25in;
}
p.created-using-flare {
  color: #020202;
  font-weight: bold;
  margin-top: 18px;
  font-size: 9pt;
  line-height: 15pt;
  text-transform: uppercase;
}
p.title {
  font-size: 55pt;
  line-height: 65pt;
  margin-top: 30px;
  mc-hyphenate: never;
}
p.title-page-footer {
  color: #242a2e;
  font-size: 9pt;
  frame-break-before: always;
  line-height: 15pt;
  margin-top: 30px;
}
p.title-page-url {
  color: #242a2e;
  font-size: 9pt;
  line-height: 15pt;
}
p.TOC1 {
  color: #242a2e;
  font-size: 19pt;
  font-weight: normal;
  line-height: 21pt;
  margin-bottom: 15px;
  margin-top: 15px;
  page-break-after: avoid;
}
p.TOC2 {
  color: #242a2e;
  font-size: 15pt;
  font-weight: normal;
  line-height: 21pt;
  margin-bottom: 13px;
  margin-left: 0.5in;
  margin-top: 13px;
}
p.TOC3 {
  color: #242a2e;
  font-size: 13pt;
  line-height: 21pt;
  font-weight: normal;
  margin-bottom: 10px;
  margin-left: 1in;
  margin-top: 10px;
}
/*Flare comment: Headings*/
h1 {
  font-weight: bold;
  font-size: 24pt;
  color: #020202;
}
h2 {
  font-weight: bold;
  font-size: 18pt;
  page-break-before: always;
}
h3 {
  font-weight: bold;
  font-size: 14pt;
}
h4 {
  font-weight: bold;
  font-size: 12pt;
}
h5 {
  font-weight: bold;
  font-size: 10pt;
}
h6 {
  font-weight: bold;
  font-size: 8pt;
}
/*Flare comment: Home page topic*/
div.home-layout {
  padding: 2% 2.5%;
  background-color: #ffffff;
}
div.home-section {
  border-bottom: solid 1px #dcdee0;
  padding: 0;
}
@media only screen and (max-width: 1279px) {
  div.main-section {
    overflow-y: initial;
  }
}
div.quick-links {
  mc-grid-row: true;
  margin-left: auto;
  margin-right: auto;
}
div.quick-links::before {
  content: ' ';
  display: table;
}
div.quick-links::after {
  content: ' ';
  display: table;
  clear: both;
}
div.quick-links > div {
  float: left;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div.quick-links > div:nth-child(1),
div.quick-links > div:nth-child(2),
div.quick-links > div:nth-child(3),
div.quick-links > div:nth-child(4) {
  width: 20%;
  margin-left: 2%;
}
div.quick-links * {
  text-align: center;
}
html.home-topic .body-container {
  padding: 0;
}
html.home-topic .main-section > .outer-row {
  max-width: 100%;
  padding: 0;
}
/*MadCap|dropDown
{
    border-bottom: 1px solid var(--tile_gray);
    mc-image-position: left;
    mc-image-spacing: 10px;
    mc-open-image: url('../Images/Minus.png');
    mc-closed-image: url('../Images/Plus.png');
    padding: 10px 0;
}

MadCap|dropDownBody
{
    padding: 10px 30px 0;
}

MadCap|dropDownHotspot
{
    cursor: hand;
    text-decoration: none;
    color: @colorHerschelgray;
    font-weight: bold;
    border-bottom: none;
    font-size: 17px;  
}*/
MadCap|expandingBody {
  color: #242a2e;
  font-style: italic;
}
MadCap|expandingHead {
  font-style: italic;
  font-weight: normal;
  cursor: hand;
  text-decoration: none;
  color: #020202;
}
/*Flare comment: Lists*/
dd,
dd p,
dt,
dt p,
li,
li p {
  margin-bottom: 8px;
  margin-top: 8px;
}
dl,
ol,
ul {
  letter-spacing: 0.25px;
  margin-top: 0px;
  margin-bottom: 0px;
}
/*Flare comment: Page layout*/
p.frame-footer-page-number {
  color: #7a858c;
  font-size: 11pt;
  font-weight: bold;
  text-align: right;
}
p.frame-footer-text {
  color: #7a858c;
  font-size: 11pt;
  font-weight: bold;
  text-transform: uppercase;
}
.page-layout-front-header {
  background-color: #020202;
  height: 155px;
  width: 825px;
}
.page-layout-front-logo {
  height: 90px;
  width: 724px;
  background-color: transparent;
  background-image: url('../Images/ETC_4c.eps');
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.page-layout-front-main {
  background-color: #242a2e;
  height: 650px;
  margin: 0px;
}
.page-layout-front-footer {
  height: 275px;
  margin: 0px;
  background-color: #242a2e;
  background-image: url('../Images/logo_ETC_angle.png');
  background-repeat: no-repeat;
  background-size: cover;
}
/*Flare comment: Template page*/
.home-footer-logo {
  background-repeat: no-repeat;
  background-position: right center;
  width: 400px;
  background-image: url('../Images/ETC_4crev.png');
}
@media only screen and (max-width: 767px) {
  .home-footer-logo {
    padding: 20px;
    background-origin: content-box;
    background-size: contain;
  }
}
p.footer {
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 13pt;
  color: #ffffff;
}
p.footer-sub {
  color: #ffffff;
  font-size: 14pt;
  margin-top: 14px;
}