h1 > span.title {
  color: white;
  font-family: "Open Sans";
  font-size: 150%;
  letter-spacing: 4px;
  margin: 0px 10px 20px 20px;
}

h1.title.topictitle1 {
  color: #666;
  font: 300 26pt "Open Sans", "Lucida sans Unicode", "Lucida Grande";
  letter-spacing: 3px;
  font-weight: normal;
  background: transparent;
  margin: 0em 0 0em -0.5em;
}

span.undefined_element {
  display: none;
}
a:link,
a:visited {
  color: #308ce8;
  letter-spacing: 1px;
}
a:hover {
  color: red;
}

body.frmBody {
  padding: 0em 2em;
}
body.frmBody div.footer {
  width: 100%;
  text-align: center;
}
body.frmBody div.section {
  margin: 2em 0 1em 0;
}
body.frmBody div.section p {
  margin-left: 2em;
}

div.relinfo {
  margin-top: 4em;
  padding-top: 0.5em;
  border-top: solid 1px #eee;
}
div.relinfo > strong {
  color: #666;
  font: normal 12pt "Open Sans", "Trebuchet MS", "Lucida sans Unicode",
    "Lucida Grande";
  letter-spacing: 0.5px;
}

div#breadcrumbLinks {
  margin-left: 20px;
}
div#breadcrumbLinks > span {
  display: none;
}
div#breadcrumbLinks .navheader_parent_path {
  margin-left: 0;
}
div#breadcrumbLinks .navheader_parent_path:not(:last-of-type):after {
  content: " > ";
}
div#navigationLinks a:link,
div#navigationLinks a:visited {
  color: white !important;
}

.shortdesc,
.p,
.ul,
.ol {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 130%;
}

/**************************************************************************************************   FIGURES */
body figure {
  display: flex;
  flex-flow: column;
  -webkit-flex-flow: column;
  -moz-flex-flow: column; 
  margin: 2em 0;
}

body figure img {
  display: block; /* Ensures the image behaves as a block-level element */
  order: 1; /* Places the image first in the stack */

  margin-left: auto;
  margin-right: auto; /* Centers the image horizontally */
  max-width: 800px;
}
figcaption{
  order: 2; /* Places the caption second in the stack */
  text-align: center;
  letter-spacing: .5px;
  padding: 1em;
}


/**************************************************************************************************   LISTS */
.dlgopt:before {
  content: "Dialog options";
  font: bold 11pt "Open Sans", "Trebuchet MS", "Lucida sans Unicode";
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #888;
}
.dlgopt {
  display: block;
  margin: 0 auto;
  width: 70%;
}
.dlgopt dt {
  margin: 1em 0 0 1em;
}

dl .dt.dlterm
{
    font: normal 12pt Roboto, "Open Sans", "Trebuchet MS", "Lucida sans Unicode";
    letter-spacing: 1px;;
}

dl.dl {
  margin: 1em 0 3em 2em;
  width: 70%;
}
dl.dl dd {
  margin: 0em 0 2em 2em;
}

ul.ul {
  padding-left: 2em;
}
ul.ul li {
  margin: 0.25em;
}

.ullinks {
  padding-left: 2em;
}
.ullinks li {
  margin: 0.5em;
}
.ullinks li strong{
  font-size: 105%;
  font-weight: normal;
}

ul.linklist {
  padding-left: 2em;
}
ul.linklist li.related_link {
  padding: 0;
  margin: 0.5em;
}
ul.linklist li.related_link a {
  margin: 0.5em;
  padding: 0;
}

/**************************************************************************************************   STEPS */
ol.steps {
  margin: 0 4em 0 4em;
  padding: 0;
  counter-reset: li; /* Initiate a counter */
}
ol.steps > li {
  position: relative; /* Create a positioning context */
  top: 2px;
  margin: 0 2em 20px 20px; /* Give each list item a left margin to make room for the numbers */
  padding: 4px 8px; /* Add some spacing around the content */
  list-style: none; /* Disable the normal item numbering */
  min-height: 40px;
  /* border-top: 1px solid #666; */
  border-top-width: 1px; /* Set the desired border thickness */
  border-top-style: solid;
  border-image: linear-gradient(to right, #666, transparent) 1; /* Horizontal gradient from red to blue */
}
ol.steps > li:before {
  content: counter(li); /* Use the counter as content */
  counter-increment: li; /* Increment the counter by 1 */

  /* Position and style the number */
  position: absolute;
  top: -1px;
  left: -35px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 35px;

  /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
  margin-right: 8px;
  padding: 7px;
  border: 1px solid #666;
  color: #666;
  font-weight: bold;
  font-size: 120%;
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}
ol.steps > li span.cmd {
  margin: 0 0 1em 0.5em !important;
  color: #222;
  font: 600 12pt "Open Sans", "Trebuchet MS", "Lucida sans Unicode",
    "Lucida Grande";
  letter-spacing: 1px;
}
li.step div.info {
  margin: 1em 0 1em 1em;
}
li.step ul.choices {
  margin: 1em;
}
li.step ul.choices > li {
  margin-bottom: 0.5em;
}

/**************************************************************************************************   SECTIONS */
.body section {
  padding: 0 0 0 1em;
  margin: 2em 0;
}
.body section h2.title.sectiontitle {
  color: #666;
  font: 400 14pt Roboto, "Open Sans", "Trebuchet MS", "Lucida sans Unicode",
    "Lucida Grande";
  letter-spacing: 1px;
  background: transparent;
  padding: 0;
  margin: 0;
}

.body section ol li,
.body section ul li {
  margin: 0.5em;
}

/**************************************************************************************************   NOTES */
body.frmBody div.note {
  margin: 1em 4em 2em 2em;
  padding: .5em 0 0 1em;
  background: #fafafa;
  border-left: double 3px #888;
}
.note__title {
  position: relative; /* Essential for positioning the ::before element */
  font-weight: bold;
}
.note__title:before {
    display: inline-block; /* Or block, depending on desired layout */
    margin-right: 10px; /* Space between image and content */
    vertical-align: middle; /* Align image with text baseline */
}
.note.note .note__title:before {
    content: url("oxygen-webhelp/resources/img/note.png"); /* Replace with your image path */
}
.note.warning .note__title:before {
    content: url("oxygen-webhelp/resources/img/warning.png"); /* Replace with your image path */
}
.note.caution .note__title:before {
    content: url("oxygen-webhelp/resources/img/caution.png"); /* Replace with your image path */
}
.note.danger .note__title:before {
    content: url("oxygen-webhelp/resources/img/danger.png"); /* Replace with your image path */
}

.note.important .note__title:before {
    content: url("oxygen-webhelp/resources/img/important.png"); /* Replace with your image path */
}
.note.remember .note__title:before {
    content: url("oxygen-webhelp/resources/img/remember.png"); /* Replace with your image path */
}
.note.tip .note__title:before {
    content: url("oxygen-webhelp/resources/img/tip.png"); /* Replace with your image path */
}
.note.attention .note__title:before {
    content: url("oxygen-webhelp/resources/img/danger.svg"); /* Replace with your image path */
}


/**************************************************************************************************   ELEMENTS */
.keyword.apiname {
  color: #07A;
}
.keyword.uicontrol {
  color: #666;
}
.keyword.wintitle {
  color: #55A;
}

a:has(dfn.term){
  text-decoration:  none !important;  
}
a:hover:has(dfn.term){
  text-decoration:  underline;
}
/* dfn.term {
  color: #1f7e1f;
  font-style: normal;
  text-decoration:  none !important;
}
dfn.term:hover {
  color: red;
  text-decoration:  underline;
} */