@import url('prettify.css');

html {
  font-family: 'Segoe UI', Verdana, Arial;
}


/* Table of Contents */
.toc-title {
  color: #0053a0;
}

ul.toc-root {
  padding-left: 1.2em;
  margin: 0;
  width: auto;
  user-select: none;
}
@media (min-width: 64em) {

  ul.toc-root {
    display: inline-block;
    min-width: 15em;
  }

}

.toc-root a,
.toc-root a:hover,
.toc-root a:visited,
.toc-root a:active {
  color: inherit;
  text-decoration: none;
}

ul.toc-root li {
  position: relative;
  list-style: none;
  line-height: 1;
}

li.toc-leaf {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

li.toc-book {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
li.toc-book::before {
  content: '';
  position: absolute;
  top: .4em;
  left: -1.5em;
  width: 1.5em;
  height: 1.5em;
  background-image: url("arrow-right.svg");
  background-size: 1.25em;
  background-position: center;
  transition: transform .25s ease;
  opacity: .5;
}
li.toc-book-open::before {
  transform: rotate(90deg);
}
li.toc-book ul {
  display: none;
  padding: 0 1em;
  margin: 0;
}

li.toc-leaf > a,
li.toc-book > div {
  display: inline-block;
  cursor: pointer;
  padding: .65em;
  margin-top: 0;
  white-space: nowrap;
  border-radius: .25em;
  transition: background-color .2s ease;
}
li.toc-leaf:hover > a,
li.toc-book:hover > div {
  background-color: rgba(0,0,0,.1);
}
li.toc-book.toc-book-open:hover > div {
  background-color: transparent;
}
li.toc-book.toc-book-open > div:hover {
  background-color: rgba(0,0,0,.1);
}

li.toc-leaf.toc-leaf-selected {
  cursor: default;
}
li.toc-leaf.toc-leaf-selected a {
  cursor: default;
  background-color: #ddd;
  font-weight: 600;
}


/* Glossary */
#topic ul.glossary-index {
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 4em;
  overflow-x: auto;
  padding: .5em 0;
  margin: 0;
  list-style-type: none;
  background-color: #fff;
  color: #bbb;
  border-bottom: .25em solid #eee;
}

#topic ul.glossary-index li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  min-width: 2em;
  height: 2em;
  line-height: 1;
  margin: 0;
}
#topic ul.glossary-index li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

div[data-topic-name="Glossary"] h2 a[name] {
  display: block;
  position: relative;
  top: -7.5em; /* Offset anchor position */
  pointer-events: none;
}

@media (min-width: 40em) {

  #topic ul.glossary-index {
    flex-wrap: wrap;
    overflow: visible;
  }

}
@media (min-width: 64em) {

  #topic ul.glossary-index {
    top: -2.75em;
  }

  div[data-topic-name="Glossary"] h2 a[name] {
    top: -4em;
  }

}


/* Glossary Tooltips */
.glossary-term {
  display: inline;
  color: #008000;
  border-bottom: 1px dotted #008000;
  cursor: pointer;
}

.glossary-term-definition {
  display: none;
  position: absolute;
  color: #333;
  background-color: #d4f5d4;
  border: 1px dashed #bbdcbc;
  padding: .3em .5em !important;
  margin: .25em !important;
  background-repeat: no-repeat;
  background-position: .25em .25em;
  line-height: 1.5;
}
.glossary-term-definition *:last-child {
  margin-bottom: 0;
}


/* Info Boxes (Notes/Tips) */
div.note-box,
div.tip-box,
div.techtip-box,
div.caution-box,
div.sf-box,
div.autopilot-box {
  font-size: 1em;
  line-height: 1.4;
  border-top: #d5d5d3 1px solid;
  border-bottom: #d5d5d3 1px solid;
  padding: .5em .5em .5em 2em;
  margin: 1em 0;
  background-color: rgb(247, 247, 255);
  background-repeat: no-repeat;
  background-position: .6em .75em;
}
#topic div.note-box *:first-child,
#topic div.tip-box *:first-child,
#topic div.techtip-box *:first-child,
#topic div.caution-box *:first-child,
#topic div.sf-box *:first-child,
#topic div.autopilot-box *:first-child {
  margin-top: 0;
}
#topic div.note-box *:last-child,
#topic div.tip-box *:last-child,
#topic div.techtip-box *:last-child,
#topic div.caution-box *:last-child,
#topic div.sf-box *:last-child,
#topic div.autopilot-box *:last-child {
  margin-bottom: 0;
}

div.note-box {
  background-image: url('Note.gif');
  background-position: .75em .9em;
}
div.tip-box,
div.techtip-box {
  background-image: url('Tip.gif');
  background-position: .5em .75em;
}
div.caution-box {
  background-image: url('Caution.gif');
  background-position: .5em .75em;
}
div.sf-box {
  background-image: url('SpecFlow.gif');
}
div.autopilot-box {
  background-image: url('Autopilot.gif');
}


/* Icons */
.icon-book-closed {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('BookClosed.gif');
}

.icon-book-open {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('BookOpen.gif');
}

.icon-topic {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('Topic.gif');
}

.icon-expand {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('Enlarge.gif');
}

.icon-collapse {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('Shrink.gif');
}


/* Dropdown Content (Accordions) */
.drop-down-section-heading {
  display: block;
  margin: .75em 0;
  line-height: 1.4;
}
.drop-down-section-content {
  padding: 0 0 .75em 1em;
}

.drop-down-section-heading .icon-expand {
  width: 14px;
  height: 10px;
  background-image: url('Right.png');
}
.drop-down-section-heading .icon-collapse {
  width: 14px;
  height: 10px;
  background-image: url('Down.png');
}

h2.collapsible-heading {
  cursor: pointer;
}

h2 .icon-expand {
  width: 9px;
  height: 9px;
  background-image: url('Plus.png');
  display: inline-block;
  margin-right: .25em;
}
h2 .icon-collapse {
  width: 9px;
  height: 9px;
  background-image: url('Minus.png');
  display: inline-block;
  margin-right: .25em;
}


/* Images */
div[data-topic-name] > img {
  margin-bottom: .75em;
}

div.expand-image {
  margin-top: 1em;
}
img.expand-image {
  display: block;
  margin: 0;
}
a.expand-image {
  display: inline-flex;
  align-items: center;
  user-select: none;
  padding: .75em 0;
  margin-bottom: .5em;
}
a.expand-image .icon-expand,
a.expand-image .icon-collapse {
  margin-right: .5em;
}

@media screen and (max-width: 40em) {

  div.expand-image.is-expanded {
    overflow-x: auto;
  }
  div.expand-image.is-expanded img {
    width: auto;
    max-width: none
  }

}


/* Code Preview Styles */
div.code-box {
  border-bottom: #d5d5d3 1px solid;
  margin: .25em 0;
  background-color: rgb(247, 247, 255);
  padding: 0;
  background-repeat: no-repeat;
  background-position: .25em .25em;
}

div.code-box-header {
  padding: .25em;
  background-color: rgb(239, 239, 247);
  border-bottom: #d5d5d3 1px solid;
  color: #24496d;
}

pre.code-box-content {
  padding: .5em;
  margin: .5em 0 1em;
  border-radius: .25em;
  border: #d5d5d3 1px solid;
  background-color: rgb(245, 245, 245);
  font-family: Consolas, monospace;
  color: #800000;
}

.rule {
  font-family: 'Courier New', sans-serif;
}
td.rule {
  width: 15em;
}

.rule-p1 {
  color: navy;
}
.rule-p2 {
  color: darkgreen;
}
.rule-p3 {
  color: darkred;
}
.rule-p4 {
  color: darkmagenta;
}


/* Topic Typography */
#topic {
  color: #3a3a3a;
}

#topic p,
#topic li {
  font-size: 1em;
  line-height: 1.5;
}

p {
  margin: 0 0 .75em;
}

#topic ul,
#topic ol {
  margin: 1em 0;
}
#topic ul {
  list-style-type: disc;
  padding: 0 0 0 1.25em;
}
#topic ol {
  padding: 0 0 0 2em;
}
#topic li {
  margin: 0 0 .75em;
}

#topic strong {
  font-weight: bold;
}

#topic blockquote {
  line-height: 1.5;
  padding-left: 1.25em;
}
#topic blockquote h3 {
  font-size: 1.3em;
  margin: 1.5em 0 .75em;
}
#topic blockquote p {
  margin: 0 0 .75em;
  font-weight: 400;
}
#topic blockquote img {
  margin: 0 0 .75em;
}
#topic blockquote *:last-child {
  margin-bottom: 0;
}

#topic a {
  color: #0088cc;
  text-decoration: none;
  cursor: pointer;
}
#topic a:hover {
  color: #0088cc;
  text-decoration: underline;
}

#topic a,
#topic .break-word {
  overflow-wrap: break-word; /* Wrap long links */
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}

#topic h2,
#topic h3,
#topic h4,
#topic h5 {
  line-height: 1.3;
  font-weight: 400;
  margin: 1.25em 0 .75em;
  color: #2e4b5d;
}

#topic h2 {
  font-size: 1.375em; /* Base: 22px */
  margin: 1.5em 0 .75em;
  color: #b02626;
}
#topic h3 {
  font-size: 1.25em; /* Base: 20px */
}
#topic h4 {
  font-size: 1.125em; /* Base: 18px */
}
#topic h5 {
  font-size: 1em; /* Base: 16px */
}

@media screen and (min-width: 40em) {

  #topic h2 {
    font-size: 1.625em; /* Base: 26px */
  }
  #topic h3 {
    font-size: 1.375em; /* Base: 22px */
  }
  #topic h4 {
    font-size: 1.25em; /* Base: 20px */
  }
  #topic h5 {
    font-size: 1.125em; /* Base: 18px */
  }

}

#topic div[data-topic-name] > *:first-child {
  margin-top: 0;
}


/* Table */
#topic table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin: 1em 0;
}
#topic table,
#topic table a.expand-image {
  word-break: normal;
  word-wrap: normal;
}

#topic tr {
  vertical-align: top;
}

#topic th,
#topic td {
  font-size: 1em; /* Base: 16px */
  font-weight: normal;
  line-height: 1.4;
}

#topic th {
  padding: .5em;
  background-color: #efeff7;
  color: #000066;
  border-bottom: 1px solid #c8cdde;
  text-align: left;
}

#topic td {
  padding: .5em;
  background-color: #f7f7ff;
  border-bottom: 1px solid #d5d5d3;
}

#topic td p:first-child,
#topic td div:first-child {
  margin-top: 0;
}
#topic td p:last-child,
#topic td div:last-child {
  margin-bottom: 0;
}

/* Small screen tables (e.g. mobiles) */
@media screen and (max-width: 40em) {

  /* Allow wide tables to swipe on smaller screens */
  #topic table {
    display: block;
    overflow: auto;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
  }
  #topic th,
  #topic td {
    min-width: 10em; /* Ensure content does not shrink to unreadable widths */
  }

}

/* Swipe Content */
/* For content wider than the screen, allow it to be horizontally swiped if overflowing */
#topic .swipe-content {
  overflow-x: auto;
  overflow-y: hidden;
}
#topic .swipe-content table {
  display: table;
  overflow: visible;
  margin-bottom: 0;
}
#topic .swipe-content th,
#topic .swipe-content td {
  min-width: 6em;
}

#topic .swipe-content table {
  display: table;
  overflow: visible;
  margin-bottom: 0;
}

/* Responsive Youtube Embeds */
#topic .youtube-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
}
#topic .youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Filterable Lists */
#topic input.filter-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  max-width: 20em;
  margin: 2em 0 1em;
}

#topic ul[data-filterable-list] {
  margin: 0 0 2em;
}

#topic .filter-empty-state {
  font-weight: 600;
}

#topic .filter-empty-state.hidden,
#topic ul[data-filterable-list] li.hidden {
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* Copyright */
.copyright,
.copyright a {
  color: #555;
}

.copyright {
  padding: 2em 2em 0 0;
  margin-top: auto;
  line-height: 1.4;
}

.copyright a {
  display: inline-block;
  color: #555;
  text-decoration: underline;
}
.copyright a:hover {
  text-decoration: none;
}

.copyright span {
  display: inline-block;
}