hdoc-tools 0.8.10 → 0.8.11

package/ui/css/theme-default/styles/components/htl-doc.css

@@ -2,710 +2,725 @@
  * Headings
  * -------------------------------------------------------------------------- */
 
-.HTL-doc h1,
-.HTL-doc h2,
-.HTL-doc h3,
-.HTL-doc h4,
-.HTL-doc h5,
-.HTL-doc h6 {
-  position: relative;
-  font-weight: 600;
-  outline: none;
-}
-
-.HTL-doc h1 {
-  letter-spacing: -0.02em;
-  line-height: 40px;
-  font-size: 28px;
-}
-
-.HTL-doc h2 {
-  margin: 48px 0 16px;
-  padding-top: 24px;
-  letter-spacing: -0.02em;
-  line-height: 32px;
-  font-size: 24px;
-}
-
-.HTL-doc h3 {
-  margin: 32px 0 0;
-  letter-spacing: -0.01em;
-  line-height: 28px;
-  font-size: 20px;
-}
-
-.HTL-doc h2 .header-anchor {
-  position: absolute;
-  font-size: 18px;
-  left: -25px;
-  top: 52%;
-  width:32px; /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
-  opacity: 0; /*hidden */
-}
-
-.HTL-doc h3 .header-anchor {
-  position: absolute;
-  font-size: 18px;
-  left: -25px;
-  top: 5px;
-  width:32px; /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
-  opacity: 0; /*hidden */
-}
-
-
-.HTL-doc h1:hover .header-anchor,
-.HTL-doc h2:hover .header-anchor,
-.HTL-doc h3:hover .header-anchor,
-.HTL-doc h4:hover .header-anchor,
-.HTL-doc h5:hover .header-anchor,
-.HTL-doc h6:hover .header-anchor
-{
-  opacity: 1;
-}
-
-@media (min-width: 768px) {
-  .HTL-doc h1 {
-    letter-spacing: -0.02em;
-    line-height: 40px;
-    font-size: 32px;
-  }
-}
-
-/**
- * Paragraph and inline elements
- * -------------------------------------------------------------------------- */
-
-.HTL-doc p,
-.HTL-doc summary {
-  margin: 16px 0;
-}
-
-.HTL-doc p {
-  line-height: 28px;
-}
-
-.HTL-doc blockquote {
-  margin: 16px 0;
-  border-left: 2px solid var(--htl-c-divider);
-  padding-left: 16px;
-  transition: border-color 0.5s;
-}
-
-.HTL-doc blockquote > p {
-  margin: 0;
-  font-size: var(--htl-default-font-size);
-  color: var(--htl-c-text-2);
-  transition: color 0.5s;
-}
-
-.HTL-doc a {
-  font-weight: 500;
-  color: var(--htl-c-brand);
-  text-decoration-style: dotted;
-  transition: color 0.25s;
-}
-
-.HTL-doc a:hover {
-  color: var(--htl-c-brand-dark);
-}
-
-.HTL-doc strong {
-  font-weight: 600;
-}
-
-/**
- * Lists
- * -------------------------------------------------------------------------- */
-
-.HTL-doc ul,
-.HTL-doc ol {
-  padding-left: 2.5rem;
-  margin: 16px 0;
-}
-
-.HTL-doc ul {
-  list-style: disc;
-}
-
-.HTL-doc ol {
-  list-style: decimal;
-}
-
-.HTL-doc li + li {
-  margin-top: 8px;
-}
-
-.HTL-doc li > ol,
-.HTL-doc li > ul {
-  margin: 8px 0 0;
-}
-
-/**
- * Table
- * -------------------------------------------------------------------------- */
-
-.HTL-doc table {
-  display: block;
-  border-collapse: collapse;
-  margin: 20px 0;
-  font-size: var(--htl-default-font-size); /* sets font-size for table and table rows/td/th etc*/
+ .HTL-doc h1,
+ .HTL-doc h2,
+ .HTL-doc h3,
+ .HTL-doc h4,
+ .HTL-doc h5,
+ .HTL-doc h6 {
+   position: relative;
+   font-weight: 600;
+   outline: none;
  }
-
-.HTL-doc tr {
-  border-top: 1px solid var(--htl-c-divider);
-  transition: background-color 0.5s;
-}
-
-.HTL-doc tr:nth-child(2n) {
-  background-color: var(--htl-c-bg-soft);
-}
-
-.HTL-doc th,
-.HTL-doc td {
-  border: 1px solid var(--htl-c-divider);
-  padding: 10px 14px;
-  vertical-align: top;
-}
-
-.HTL-doc th {
-  font-size: var(--htl-default-font-size);
-  font-weight: 600;
-  background-color: var(--htl-c-white-soft);
-}
-
-.dark .HTL-doc th {
-  background-color: var(--htl-c-black);
-}
-
-/**
- * Decorational elements
- * -------------------------------------------------------------------------- */
-
-.HTL-doc hr {
-  margin: 16px 0;
-  border: none;
-  border-top: 1px solid var(--htl-c-divider-light);
-}
-
-/**
- * Custom Block
- * -------------------------------------------------------------------------- */
-
-.HTL-doc .custom-block {
-  margin: 16px 0;
-}
-
-.HTL-doc .custom-block p {
-  margin: 8px 0;
-  line-height: 24px;
-}
-
-.HTL-doc .custom-block p:first-child {
-  margin: 0;
-}
-
-.HTL-doc .custom-block a {
-  color: inherit;
-  font-weight: 600;
-  text-decoration: underline;
-  transition: opacity 0.25s;
-}
-
-.HTL-doc .custom-block a:hover {
-  opacity: 0.6;
-}
-
-.HTL-doc .custom-block code {
-  font-size: var(--htl-custom-block-code-font-size);
-  font-weight: 700;
-  color: inherit;
-}
-
-.HTL-doc .custom-block div[class*='language-'] {
-  margin: 8px 0;
-}
-
-.HTL-doc .custom-block div[class*='language-'] code {
-  font-weight: 400;
-  background-color: transparent;
-}
-
-/**
- * Code
- * -------------------------------------------------------------------------- */
-
-/* inline code */
-.HTL-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
-  font-size: var(--htl-code-font-size);
-}
-
-.HTL-doc :not(pre) > code {
-  border-radius: 4px;
-  padding: 3px 6px;
-  color: var(--htl-c-text-code);
-  background-color: var(--htl-c-bg-mute);
-  transition: color 0.5s, background-color 0.5s;
-}
-
-.HTL-doc h1 > code,
-.HTL-doc h2 > code,
-.HTL-doc h3 > code {
-  font-size: var(--htl-default-font-size);
-}
-
-.HTL-doc a > code {
-  color: var(--htl-c-brand);
-  transition: color 0.25s;
-}
-
-.HTL-doc a:hover > code {
-  color: var(--htl-c-brand-dark);
-}
-
-.HTL-doc div[class*='language-'] {
-  position: relative;
-  margin: 16px -24px;
-  background-color: var(--htl-code-block-bg);
-  overflow-x: auto;
-  transition: background-color 0.5s;
-}
-
-@media (min-width: 640px) {
-  .HTL-doc div[class*='language-'] {
-    border-radius: 8px;
-    margin: 16px 0;
-  }
-}
-
-@media (max-width: 639px) {
-  .HTL-doc li div[class*='language-'] {
-    border-radius: 8px 0 0 8px;
+ 
+ .HTL-doc h1 {
+   letter-spacing: -0.02em;
+   line-height: 40px;
+   font-size: 28px;
+ }
+ 
+ .HTL-doc h2 {
+   margin: 48px 0 16px;
+   padding-top: 24px;
+   letter-spacing: -0.02em;
+   line-height: 32px;
+   font-size: 24px;
+ }
+ 
+ .HTL-doc h3 {
+   margin: 32px 0 0;
+   letter-spacing: -0.01em;
+   line-height: 28px;
+   font-size: 20px;
+ }
+ 
+ .HTL-doc h2 .header-anchor {
+   position: absolute;
+   font-size: 18px;
+   left: -25px;
+   top: 52%;
+   width:32px; /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
+   opacity: 0; /*hidden */
+ }
+ 
+ .HTL-doc h3 .header-anchor {
+   position: absolute;
+   font-size: 18px;
+   left: -25px;
+   top: 5px;
+   width:32px; /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
+   opacity: 0; /*hidden */
+ }
+ 
+ 
+ .HTL-doc h1:hover .header-anchor,
+ .HTL-doc h2:hover .header-anchor,
+ .HTL-doc h3:hover .header-anchor,
+ .HTL-doc h4:hover .header-anchor,
+ .HTL-doc h5:hover .header-anchor,
+ .HTL-doc h6:hover .header-anchor
+ {
+   opacity: 1;
+ }
+ 
+ @media (min-width: 768px) {
+   .HTL-doc h1 {
+     letter-spacing: -0.02em;
+     line-height: 40px;
+     font-size: 32px;
+   }
+ }
+ 
+ /**
+  * Paragraph and inline elements
+  * -------------------------------------------------------------------------- */
+ 
+ .HTL-doc p,
+ .HTL-doc summary {
+   margin: 16px 0;
+ }
+ 
+ .HTL-doc p {
+   line-height: 28px;
+ }
+ 
+ .HTL-doc blockquote {
+   margin: 16px 0;
+   border-left: 2px solid var(--htl-c-divider);
+   padding-left: 16px;
+   transition: border-color 0.5s;
+ }
+ 
+ .HTL-doc blockquote > p {
+   margin: 0;
+   font-size: var(--htl-default-font-size);
+   color: var(--htl-c-text-2);
+   transition: color 0.5s;
+ }
+ 
+ .HTL-doc a {
+   font-weight: 500;
+   color: var(--htl-c-brand);
+   text-decoration-style: dotted;
+   transition: color 0.25s;
+ }
+ 
+ .HTL-doc a:hover {
+   color: var(--htl-c-brand-dark);
+ }
+ 
+ .HTL-doc strong {
+   font-weight: 600;
+ }
+ 
+ /**
+  * Lists
+  * -------------------------------------------------------------------------- */
+ 
+ .HTL-doc ul,
+ .HTL-doc ol {
+   padding-left: 2.5rem;
+   margin: 16px 0;
+ }
+ 
+ .HTL-doc ul {
+   list-style: disc;
+ }
+ 
+ .HTL-doc ol {
+   list-style: decimal;
+ }
+ 
+ .HTL-doc li + li {
+   margin-top: 8px;
+ }
+ 
+ .HTL-doc li > ol,
+ .HTL-doc li > ul {
+   margin: 8px 0 0;
+ }
+ 
+ /**
+  * Table
+  * -------------------------------------------------------------------------- */
+ 
+ .HTL-doc table {
+   display: block;
+   border-collapse: collapse;
+   margin: 20px 0;
+   font-size: var(--htl-default-font-size); /* sets font-size for table and table rows/td/th etc*/
   }
-}
-
-.HTL-doc div[class*='language-'] + div[class*='language-'],
-.HTL-doc div[class$='-api'] + div[class*='language-'],
-.HTL-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
-  margin-top: -8px;
-}
-
-.HTL-doc [class*='language-'] pre,
-.HTL-doc [class*='language-'] code {
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-.HTL-doc [class*='language-'] pre {
-  position: relative;
-  z-index: 1;
-  margin: 0;
-  padding: 16px 0;
-  background: transparent;
-  overflow-x: auto;
-}
-
-.HTL-doc [class*='language-'] code {
-  display: block;
-  padding: 0 24px;
-  width: fit-content;
-  min-width: 100%;
-  line-height: var(--htl-code-line-height);
-  font-size: var(--htl-code-font-size);
-  color: var(--htl-code-block-color);
-  transition: color 0.5s;
-}
-
-.HTL-doc [class*='language-'] code .highlighted {
-  background-color: var(--htl-code-line-highlight-color);
-  transition: background-color 0.5s;
-  margin: 0 -24px;
-  padding: 0 24px;
-  width: calc(100% + 2 * 24px);
-  display: inline-block;
-}
-
-.HTL-doc [class*='language-'] code .highlighted.error {
-  background-color: var(--htl-code-line-error-color);
-}
-
-.HTL-doc [class*='language-'] code .highlighted.warning {
-  background-color: var(--htl-code-line-warning-color);
-}
-
-.HTL-doc [class*='language-'] code .diff {
-  transition: background-color 0.5s;
-  margin: 0 -24px;
-  padding: 0 24px;
-  width: calc(100% + 2 * 24px);
-  display: inline-block;
-}
-
-.HTL-doc [class*='language-'] code .diff::before {
-  position: absolute;
-  left: 1rem;
-}
-
-.HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
-  filter: blur(0.095rem);
-  opacity: 0.4;
-  transition: filter 0.35s, opacity 0.35s;
-}
-
-.HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
-  opacity: 0.7;
-  transition: filter 0.35s, opacity 0.35s;
-}
-
-.HTL-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
-  filter: blur(0);
-  opacity: 1;
-}
-
-.HTL-doc [class*='language-'] code .diff.remove {
-  background-color: var(--htl-code-line-diff-remove-color);
-  opacity: 0.7;
-}
-
-.HTL-doc [class*='language-'] code .diff.remove::before {
-  content: '-';
-  color: var(--htl-code-line-diff-remove-symbol-color);
-}
-
-.HTL-doc [class*='language-'] code .diff.add {
-  background-color: var(--htl-code-line-diff-add-color);
-}
-
-.HTL-doc [class*='language-'] code .diff.add::before {
-  content: '+';
-  color: var(--htl-code-line-diff-add-symbol-color);
-}
-
-.HTL-doc div[class*='language-'].line-numbers-mode {
-  padding-left: 32px;
-}
-
-.HTL-doc .line-numbers-wrapper {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 3;
-  border-right: 1px solid var(--htl-c-divider-dark-2);
-  padding-top: 16px;
-  width: 32px;
-  text-align: center;
-  font-family: var(--htl-font-family-mono);
-  line-height: var(--htl-code-line-height);
-  font-size: var(--htl-code-font-size);
-  color: var(--htl-code-line-number-color);
-  transition: border-color 0.5s, color 0.5s;
-}
-
-.HTL-doc [class*='language-'] > button.copy {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 3;
-  display: block;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  width: 40px;
-  height: 40px;
-  background-color: var(--htl-code-block-bg);
-  opacity: 0;
-  cursor: pointer;
-  background-image: var(--htl-icon-copy);
-  background-position: 50%;
-  background-size: 20px;
-  background-repeat: no-repeat;
-  transition: opacity 0.4s;
-}
-
-.HTL-doc [class*='language-']:hover > button.copy,
-.HTL-doc [class*='language-'] > button.copy:focus {
-  opacity: 1;
-}
-
-.HTL-doc [class*='language-'] > button.copy:hover {
-  background-color: var(--htl-code-copy-code-hover-bg);
-}
-
-.HTL-doc [class*='language-'] > button.copy.copied,
-.HTL-doc [class*='language-'] > button.copy:hover.copied {
-  border-radius: 0 4px 4px 0;
-  background-color: var(--htl-code-copy-code-hover-bg);
-  background-image: var(--htl-icon-copied);
-}
-
-.HTL-doc [class*='language-'] > button.copy.copied::before,
-.HTL-doc [class*='language-'] > button.copy:hover.copied::before {
-  position: relative;
-  left: -65px;
-  display: block;
-  border-radius: 4px 0 0 4px;
-  padding-top: 8px;
-  width: 64px;
-  height: 40px;
-  text-align: center;
-  font-size: var(--htl-default-font-size);
-  font-weight: 500;
-  color: var(--htl-code-copy-code-active-text);
-  background-color: var(--htl-code-copy-code-hover-bg);
-  white-space: nowrap;
-  content: 'Copied';
-}
-
-.HTL-doc [class*='language-'] > span.lang {
-  position: absolute;
-  top: 6px;
-  right: 12px;
-  z-index: 2;
-  font-size: var(--htl-default-font-size);
-  font-weight: 500;
-  color: var(--htl-c-text-dark-3);
-  transition: color 0.4s, opacity 0.4s;
-}
-
-.HTL-doc [class*='language-']:hover > button.copy + span.lang,
-.HTL-doc [class*='language-'] > button.copy:focus + span.lang {
-  opacity: 0;
-}
-
-/**
- * Component: Team
- * -------------------------------------------------------------------------- */
-
-.HTL-doc .VPTeamMembers {
-  margin-top: 24px;
-}
-
-.HTL-doc .VPTeamMembers.small.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
-}
-
-.HTL-doc .VPTeamMembers.small.count-2 .container,
-.HTL-doc .VPTeamMembers.small.count-3 .container {
-  max-width: 100% !important;
-}
-
-.HTL-doc .VPTeamMembers.medium.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
-}
-
-
-
-/* CUSTOM HTL CLASSES FOR HTDOC */
-/* highlightjs code copy badge */
-.HTL-doc .code-badge {
-  background: #555 !important;
-  padding: 8px !important;
-}
-.HTL-doc .code-badge-copy-icon {
-  font-size: 1.3em !important;
-}
-
-/* HTL inline styles */
-.HTL-doc .badge {
-  white-space: nowrap;
-  border-radius: 4px;
-  padding: 0.1rem 0.5rem;
-  font-size: 0.8em;
-  margin-right: 4px;
-  color: white;
-}
-
-.HTL-doc .badge:after {
-  border-radius: 4px;
-  padding: 0.05rem 0.25rem;
-}
-
-.HTL-doc .badge.badge-schema:after { /* MINT */
-  content: "Schema";
-  border: solid 1px #34bc9d;
-  background-color: #46cfb0;
-}
-
-.HTL-doc .badge.badge-simple:after { /* AQUA */
-  content: "Simple";
-  border: solid 1px #3bd0d6;
-  background-color: #4fc2e5;
-}
-
-.HTL-doc .badge.badge-complex:after { /* GRAPEFRUIT */
-  content: "Complex";
-  border: solid 1px #da4453;
-  background-color: #ed5565;
-  color: white;
-}
-
-.HTL-doc .badge.badge-method:after { /* BLUEJEANS */
-  content: "Method";
-  border: solid 1px #4b8ad5;
-  background-color: #5e96e6;
-  color: white;
-}
-
-.HTL-doc .badge.badge-experimental:after {
-  content: "Experimental";
-  border: solid 1px #da4453;
-  background-color: #ed5565;
-}
-
-.HTL-doc .badge.badge-production:after {
-  content: "In Production";
-  border: solid 1px #185e0f;
-  background-color: #3d9719;
-}
-
-.HTL-doc .badge.badge-development:after {
-  content: "In Development";
-  border: solid 1px #4b8ad5;
-  background-color: #5e96e6;
-}
-
-.HTL-doc .badge.badge-preliminary:after {
-  content: "Preliminary";
-  border: solid 1px #bdaa58;
-  background-color: #ddaf19;
-}
-
-.HTL-doc .badge.badge-depreciated:after {
-  content: "Depreciated";
-  border: solid 1px #494949;
-  background-color: #666666;
-}
-
-.HTL-doc .badge.badge-info:after {
-  content: "Info";
-  white-space: nowrap;
-  border: solid 1px rgb(48, 121, 0);
-  background-color: rgb(57, 150, 3);
-}
-
-.HTL-doc .badge.badge-warn:after {
-  content: "Warning";
-  white-space: nowrap;
-  border: solid 1px rgb(173, 137, 19);
-  background-color: rgb(211, 168, 29);
-}
-
-.HTL-doc .badge.badge-error:after {
-  content: "Error";
-  white-space: nowrap;
-  border: solid 1px rgb(121, 0, 0);
-  background-color: rgb(184, 0, 0);
-}
-
-.HTL-doc .error-msg {
-  color: rgb(184, 0, 0);
-}
-
-.HTL-doc .double-braces:before {
-  display: inline;
-  content: '{{';
-}
-
-.HTL-doc .double-braces:after {
-  display: inline;
-  content: '}}';
-}
-
-.HTL-doc .list-line-space {
-  line-height: 24px;
-  margin: 0;
-}
-
-
-/* HTL div alerts */
-
-.HTL-doc .hdoc-alert{
-  border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 16px 16px 8px;
-  line-height: 24px;
-  font-size: var(--htl-default-font-size);
-  color: var(--htl-c-text-2);
-  margin:10px 0;
-}
-
-.HTL-doc .hdoc-alert p{
-  margin: 8 0;
-}
-.HTL-doc .hdoc-alert .hdoc-alert-title .bi{
-  margin-right:5px;
-  
-}
-.HTL-doc .hdoc-alert .hdoc-alert-title
-{
-  font-weight: 700;
-  margin: 0;
-}
-
-.HTL-doc .hdoc-alert.alert-icon-note
-{
-  border-color: var(--htl-custom-block-details-border);
-  color: var(--htl-custom-block-details-text);
-  background-color: var(--htl-custom-block-details-bg);
-}
-.HTL-doc .hdoc-alert.alert-icon-note code
-{
-  background-color: var(--htl-custom-block-details-code-bg);
-}
-
-.HTL-doc .hdoc-alert.alert-icon-tip
-{
-  border-color: var(--htl-custom-block-tip-border);
-  color: var(--htl-custom-block-tip-text);
-  background-color: var(--htl-custom-block-tip-bg);
-}
-.HTL-doc .hdoc-alert.alert-icon-tip code{
-  background-color: var(--htl-custom-block-tip-code-bg);
-}
-
-.HTL-doc .hdoc-alert.alert-icon-important
-{
-  border-color: var(--htl-custom-block-info-border);
-  color: var(--htl-custom-block-info-text);
-  background-color: var(--htl-custom-block-info-bg);
-
-}
-.HTL-doc .hdoc-alert.alert-icon-important code {
-  background-color: var(--htl-custom-block-info-code-bg);
-}
-
-.HTL-doc .hdoc-alert.alert-icon-caution
-{
-  border-color: var(--htl-custom-block-caution-border);
-  color: var(--htl-custom-block-caution-text);
-  background-color: var(--htl-custom-block-caution-bg);
-}
-.HTL-doc .hdoc-alert.alert-icon-caution code {
-  background-color: var(--htl-custom-block-caution-code-bg);
-}
-
-.HTL-doc .hdoc-alert.alert-icon-warning
-{
-  border-color: var(--htl-custom-block-warning-border);
-  color: var(--htl-custom-block-warning-text);
-  background-color: var(--htl-custom-block-warning-bg);
-}
-
-.HTL-doc .hdoc-alert.alert-icon-warning code
-{
-  background-color: var(--htl-custom-block-warning-code-bg);
-}
-
-
+ 
+ .HTL-doc tr {
+   border-top: 1px solid var(--htl-c-divider);
+   transition: background-color 0.5s;
+ }
+ 
+ .HTL-doc tr:nth-child(2n) {
+   background-color: var(--htl-c-bg-soft);
+ }
+ 
+ .HTL-doc th,
+ .HTL-doc td {
+   border: 1px solid var(--htl-c-divider);
+   padding: 10px 14px;
+   vertical-align: top;
+ }
+ 
+ .HTL-doc th {
+   font-size: var(--htl-default-font-size);
+   font-weight: 600;
+   background-color: var(--htl-c-white-soft);
+ }
+ 
+ .dark .HTL-doc th {
+   background-color: var(--htl-c-black);
+ }
+ 
+ /**
+  * Decorational elements
+  * -------------------------------------------------------------------------- */
+ 
+ .HTL-doc hr {
+   margin: 16px 0;
+   border: none;
+   border-top: 1px solid var(--htl-c-divider-light);
+ }
+ 
+ /**
+  * Custom Block
+  * -------------------------------------------------------------------------- */
+ 
+ .HTL-doc .custom-block {
+   margin: 16px 0;
+ }
+ 
+ .HTL-doc .custom-block p {
+   margin: 8px 0;
+   line-height: 24px;
+ }
+ 
+ .HTL-doc .custom-block p:first-child {
+   margin: 0;
+ }
+ 
+ .HTL-doc .custom-block a {
+   color: inherit;
+   font-weight: 600;
+   text-decoration: underline;
+   transition: opacity 0.25s;
+ }
+ 
+ .HTL-doc .custom-block a:hover {
+   opacity: 0.6;
+ }
+ 
+ .HTL-doc .custom-block code {
+   font-size: var(--htl-custom-block-code-font-size);
+   font-weight: 700;
+   color: inherit;
+ }
+ 
+ .HTL-doc .custom-block div[class*='language-'] {
+   margin: 8px 0;
+ }
+ 
+ .HTL-doc .custom-block div[class*='language-'] code {
+   font-weight: 400;
+   background-color: transparent;
+ }
+ 
+ /**
+  * Code
+  * -------------------------------------------------------------------------- */
+ 
+ /* inline code */
+ .HTL-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
+   font-size: var(--htl-code-font-size);
+ }
+ 
+ .HTL-doc :not(pre) > code {
+   border-radius: 4px;
+   padding: 3px 6px;
+   color: var(--htl-c-text-code);
+   background-color: var(--htl-c-bg-mute);
+   transition: color 0.5s, background-color 0.5s;
+ }
+ 
+ .HTL-doc h1 > code,
+ .HTL-doc h2 > code,
+ .HTL-doc h3 > code {
+   font-size: var(--htl-default-font-size);
+ }
+ 
+ .HTL-doc a > code {
+   color: var(--htl-c-brand);
+   transition: color 0.25s;
+ }
+ 
+ .HTL-doc a:hover > code {
+   color: var(--htl-c-brand-dark);
+ }
+ 
+ .HTL-doc div[class*='language-'] {
+   position: relative;
+   margin: 16px -24px;
+   background-color: var(--htl-code-block-bg);
+   overflow-x: auto;
+   transition: background-color 0.5s;
+ }
+ 
+ @media (min-width: 640px) {
+   .HTL-doc div[class*='language-'] {
+     border-radius: 8px;
+     margin: 16px 0;
+   }
+ }
+ 
+ @media (max-width: 639px) {
+   .HTL-doc li div[class*='language-'] {
+     border-radius: 8px 0 0 8px;
+   }
+ }
+ 
+ .HTL-doc div[class*='language-'] + div[class*='language-'],
+ .HTL-doc div[class$='-api'] + div[class*='language-'],
+ .HTL-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+   margin-top: -8px;
+ }
+ 
+ .HTL-doc [class*='language-'] pre,
+ .HTL-doc [class*='language-'] code {
+   text-align: left;
+   white-space: pre;
+   word-spacing: normal;
+   word-break: normal;
+   word-wrap: normal;
+   -moz-tab-size: 4;
+   -o-tab-size: 4;
+   tab-size: 4;
+   -webkit-hyphens: none;
+   -moz-hyphens: none;
+   -ms-hyphens: none;
+   hyphens: none;
+ }
+ 
+ .HTL-doc [class*='language-'] pre {
+   position: relative;
+   z-index: 1;
+   margin: 0;
+   padding: 16px 0;
+   background: transparent;
+   overflow-x: auto;
+ }
+ 
+ .HTL-doc [class*='language-'] code {
+   display: block;
+   padding: 0 24px;
+   width: fit-content;
+   min-width: 100%;
+   line-height: var(--htl-code-line-height);
+   font-size: var(--htl-code-font-size);
+   color: var(--htl-code-block-color);
+   transition: color 0.5s;
+ }
+ 
+ .HTL-doc [class*='language-'] code .highlighted {
+   background-color: var(--htl-code-line-highlight-color);
+   transition: background-color 0.5s;
+   margin: 0 -24px;
+   padding: 0 24px;
+   width: calc(100% + 2 * 24px);
+   display: inline-block;
+ }
+ 
+ .HTL-doc [class*='language-'] code .highlighted.error {
+   background-color: var(--htl-code-line-error-color);
+ }
+ 
+ .HTL-doc [class*='language-'] code .highlighted.warning {
+   background-color: var(--htl-code-line-warning-color);
+ }
+ 
+ .HTL-doc [class*='language-'] code .diff {
+   transition: background-color 0.5s;
+   margin: 0 -24px;
+   padding: 0 24px;
+   width: calc(100% + 2 * 24px);
+   display: inline-block;
+ }
+ 
+ .HTL-doc [class*='language-'] code .diff::before {
+   position: absolute;
+   left: 1rem;
+ }
+ 
+ .HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+   filter: blur(0.095rem);
+   opacity: 0.4;
+   transition: filter 0.35s, opacity 0.35s;
+ }
+ 
+ .HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+   opacity: 0.7;
+   transition: filter 0.35s, opacity 0.35s;
+ }
+ 
+ .HTL-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+   filter: blur(0);
+   opacity: 1;
+ }
+ 
+ .HTL-doc [class*='language-'] code .diff.remove {
+   background-color: var(--htl-code-line-diff-remove-color);
+   opacity: 0.7;
+ }
+ 
+ .HTL-doc [class*='language-'] code .diff.remove::before {
+   content: '-';
+   color: var(--htl-code-line-diff-remove-symbol-color);
+ }
+ 
+ .HTL-doc [class*='language-'] code .diff.add {
+   background-color: var(--htl-code-line-diff-add-color);
+ }
+ 
+ .HTL-doc [class*='language-'] code .diff.add::before {
+   content: '+';
+   color: var(--htl-code-line-diff-add-symbol-color);
+ }
+ 
+ .HTL-doc div[class*='language-'].line-numbers-mode {
+   padding-left: 32px;
+ }
+ 
+ .HTL-doc .line-numbers-wrapper {
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   left: 0;
+   z-index: 3;
+   border-right: 1px solid var(--htl-c-divider-dark-2);
+   padding-top: 16px;
+   width: 32px;
+   text-align: center;
+   font-family: var(--htl-font-family-mono);
+   line-height: var(--htl-code-line-height);
+   font-size: var(--htl-code-font-size);
+   color: var(--htl-code-line-number-color);
+   transition: border-color 0.5s, color 0.5s;
+ }
+ 
+ .HTL-doc [class*='language-'] > button.copy {
+   position: absolute;
+   top: 8px;
+   right: 8px;
+   z-index: 3;
+   display: block;
+   justify-content: center;
+   align-items: center;
+   border-radius: 4px;
+   width: 40px;
+   height: 40px;
+   background-color: var(--htl-code-block-bg);
+   opacity: 0;
+   cursor: pointer;
+   background-image: var(--htl-icon-copy);
+   background-position: 50%;
+   background-size: 20px;
+   background-repeat: no-repeat;
+   transition: opacity 0.4s;
+ }
+ 
+ .HTL-doc [class*='language-']:hover > button.copy,
+ .HTL-doc [class*='language-'] > button.copy:focus {
+   opacity: 1;
+ }
+ 
+ .HTL-doc [class*='language-'] > button.copy:hover {
+   background-color: var(--htl-code-copy-code-hover-bg);
+ }
+ 
+ .HTL-doc [class*='language-'] > button.copy.copied,
+ .HTL-doc [class*='language-'] > button.copy:hover.copied {
+   border-radius: 0 4px 4px 0;
+   background-color: var(--htl-code-copy-code-hover-bg);
+   background-image: var(--htl-icon-copied);
+ }
+ 
+ .HTL-doc [class*='language-'] > button.copy.copied::before,
+ .HTL-doc [class*='language-'] > button.copy:hover.copied::before {
+   position: relative;
+   left: -65px;
+   display: block;
+   border-radius: 4px 0 0 4px;
+   padding-top: 8px;
+   width: 64px;
+   height: 40px;
+   text-align: center;
+   font-size: var(--htl-default-font-size);
+   font-weight: 500;
+   color: var(--htl-code-copy-code-active-text);
+   background-color: var(--htl-code-copy-code-hover-bg);
+   white-space: nowrap;
+   content: 'Copied';
+ }
+ 
+ .HTL-doc [class*='language-'] > span.lang {
+   position: absolute;
+   top: 6px;
+   right: 12px;
+   z-index: 2;
+   font-size: var(--htl-default-font-size);
+   font-weight: 500;
+   color: var(--htl-c-text-dark-3);
+   transition: color 0.4s, opacity 0.4s;
+ }
+ 
+ .HTL-doc [class*='language-']:hover > button.copy + span.lang,
+ .HTL-doc [class*='language-'] > button.copy:focus + span.lang {
+   opacity: 0;
+ }
+ 
+ /**
+  * Component: Team
+  * -------------------------------------------------------------------------- */
+ 
+ .HTL-doc .VPTeamMembers {
+   margin-top: 24px;
+ }
+ 
+ .HTL-doc .VPTeamMembers.small.count-1 .container {
+   margin: 0 !important;
+   max-width: calc((100% - 24px) / 2) !important;
+ }
+ 
+ .HTL-doc .VPTeamMembers.small.count-2 .container,
+ .HTL-doc .VPTeamMembers.small.count-3 .container {
+   max-width: 100% !important;
+ }
+ 
+ .HTL-doc .VPTeamMembers.medium.count-1 .container {
+   margin: 0 !important;
+   max-width: calc((100% - 24px) / 2) !important;
+ }
+ 
+ 
+ 
+ /* CUSTOM HTL CLASSES FOR HTDOC */
+ /* highlightjs code copy badge */
+ .HTL-doc .code-badge {
+   background: #555 !important;
+   padding: 8px !important;
+ }
+ .HTL-doc .code-badge-copy-icon {
+   font-size: 1.3em !important;
+ }
+ 
+ /* HTL inline styles */
+ .HTL-doc .badge {
+   white-space: nowrap;
+   border-radius: 4px;
+   padding: 0.1rem 0.5rem;
+   font-size: 0.8em;
+   margin-right: 4px;
+   color: white;
+   font-weight: unset;
+ }
+ 
+ .HTL-doc .badge:empty{
+   display:inline-block;
+ }
+ 
+ .HTL-doc .badge:after {
+   border-radius: 4px;
+   padding: 0.05rem 0.25rem;
+ }
+ 
+ .HTL-doc .badge.badge-schema:after { /* MINT */
+   content: "Schema";
+   border: solid 1px #34bc9d;
+   background-color: #46cfb0;
+ }
+ 
+ .HTL-doc .badge.badge-simple:after { /* AQUA */
+   content: "Simple";
+   border: solid 1px #3bd0d6;
+   background-color: #4fc2e5;
+ }
+ 
+ .HTL-doc .badge.badge-complex:after { /* GRAPEFRUIT */
+   content: "Complex";
+   border: solid 1px #da4453;
+   background-color: #ed5565;
+   color: white;
+ }
+ 
+ .HTL-doc .badge.badge-method:after { /* BLUEJEANS */
+   content: "Method";
+   border: solid 1px #4b8ad5;
+   background-color: #5e96e6;
+   color: white;
+ }
+ 
+ .HTL-doc .badge.badge-experimental:after {
+   content: "Experimental";
+   border: solid 1px #da4453;
+   background-color: #ed5565;
+ }
+ 
+ .HTL-doc .badge.badge-production:after {
+   content: "In Production";
+   border: solid 1px #185e0f;
+   background-color: #3d9719;
+ }
+ 
+ .HTL-doc .badge.badge-development:after {
+   content: "In Development";
+   border: solid 1px #4b8ad5;
+   background-color: #5e96e6;
+ }
+ 
+ .HTL-doc .badge.badge-preliminary:after {
+   content: "Preliminary";
+   border: solid 1px #bdaa58;
+   background-color: #ddaf19;
+ }
+ 
+ .HTL-doc .badge.badge-depreciated:after {
+   content: "Depreciated";
+   border: solid 1px #494949;
+   background-color: #666666;
+ }
+ 
+ .HTL-doc .badge.badge-info:after {
+   content: "Info";
+   white-space: nowrap;
+   border: solid 1px rgb(48, 121, 0);
+   background-color: rgb(57, 150, 3);
+ }
+ 
+ .HTL-doc .badge.badge-warn:after {
+   content: "Warning";
+   white-space: nowrap;
+   border: solid 1px rgb(173, 137, 19);
+   background-color: rgb(211, 168, 29);
+ }
+ 
+ .HTL-doc .badge.badge-error:after {
+   content: "Error";
+   white-space: nowrap;
+   border: solid 1px rgb(121, 0, 0);
+   background-color: rgb(184, 0, 0);
+ }
+ 
+ .HTL-doc .error-msg {
+   color: rgb(184, 0, 0);
+ }
+ 
+ .HTL-doc .double-braces:before {
+   display: inline;
+   content: '{{';
+ }
+ 
+ .HTL-doc .double-braces:after {
+   display: inline;
+   content: '}}';
+ }
+ 
+ .HTL-doc .list-line-space {
+   line-height: 24px;
+   margin: 0;
+ }
+ 
+ 
+ /* HTL div alerts */
+ 
+ .HTL-doc .hdoc-alert{
+   border: 1px solid transparent;
+   border-radius: 8px;
+   padding: 16px 16px 8px;
+   line-height: 24px;
+   font-size: var(--htl-default-font-size);
+   color: var(--htl-c-text-2);
+   margin:10px 0;
+ }
+ 
+ .HTL-doc .hdoc-alert p{
+   margin: 8 0;
+ }
+ .HTL-doc .hdoc-alert .hdoc-alert-title .bi{
+   margin-right:5px;
+   
+ }
+ .HTL-doc .hdoc-alert .hdoc-alert-title
+ {
+   font-weight: 700;
+   margin: 0;
+ }
+ 
+ .HTL-doc .hdoc-alert.alert-icon-note
+ {
+   border-color: var(--htl-custom-block-details-border);
+   color: var(--htl-custom-block-details-text);
+   background-color: var(--htl-custom-block-details-bg);
+ }
+ .HTL-doc .hdoc-alert.alert-icon-note code
+ {
+   background-color: var(--htl-custom-block-details-code-bg);
+ }
+ 
+ .HTL-doc .hdoc-alert.alert-icon-tip
+ {
+   border-color: var(--htl-custom-block-tip-border);
+   color: var(--htl-custom-block-tip-text);
+   background-color: var(--htl-custom-block-tip-bg);
+ }
+ .HTL-doc .hdoc-alert.alert-icon-tip code{
+   background-color: var(--htl-custom-block-tip-code-bg);
+ }
+ 
+ .HTL-doc .hdoc-alert.alert-icon-important
+ {
+   border-color: var(--htl-custom-block-info-border);
+   color: var(--htl-custom-block-info-text);
+   background-color: var(--htl-custom-block-info-bg);
+ 
+ }
+ .HTL-doc .hdoc-alert.alert-icon-important code {
+   background-color: var(--htl-custom-block-info-code-bg);
+ }
+ 
+ .HTL-doc .hdoc-alert.alert-icon-caution
+ {
+   border-color: var(--htl-custom-block-caution-border);
+   color: var(--htl-custom-block-caution-text);
+   background-color: var(--htl-custom-block-caution-bg);
+ }
+ .HTL-doc .hdoc-alert.alert-icon-caution code {
+   background-color: var(--htl-custom-block-caution-code-bg);
+ }
+ 
+ .HTL-doc .hdoc-alert.alert-icon-warning
+ {
+   border-color: var(--htl-custom-block-warning-border);
+   color: var(--htl-custom-block-warning-text);
+   background-color: var(--htl-custom-block-warning-bg);
+ }
+ 
+ .HTL-doc .hdoc-alert.alert-icon-warning code
+ {
+   background-color: var(--htl-custom-block-warning-code-bg);
+ }
+ 
+ 
+ .HTL-doc .after-bullets li:not(:last-child):after {
+   content: "•";
+   padding-left: 5px;
+   padding-right: 5px;
+ }
+ .HTL-doc .after-fslash li:not(:last-child):after {
+   content: "/";
+   padding-left: 5px;
+   padding-right: 5px;
+ }