:root {
  --global-font-size:15px;
  --global-line-height:1.4em;
  --global-space:10px;
  --font-stack:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;;
  --mono-font-stack:"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif;
  --background-color: whitesmoke;
  --page-width:60em;
  --font-color:#151515;
  --invert-font-color:#fff;
  --primary-color:#1a95e0;
  --secondary-color:#727578;
  --error-color:#d20962;
  --progress-bar-background:#727578;
  --progress-bar-fill:#151515;
  --code-bg-color:#e8eff2;
  --input-style:solid;
  --display-h1-decoration:none;
  --block-background-color:var(--background-color)
}
* {
  box-sizing:border-box;
  text-rendering:geometricprecision
}
*::selection {
  background:var(--primary-color);
  color:var(--invert-font-color)
}
body {
  font-size:var(--global-font-size);
  color:var(--font-color);
  line-height:var(--global-line-height);
  margin:0;
  font-family:var(--font-stack);
  word-wrap:break-word;
  background-color:var(--background-color)
}
h1,
h2,
h3,
h4,
h5,
h6,
.logo {
  line-height:var(--global-line-height)
}
a {
  cursor:pointer;
  text-decoration:none
}
a:hover {
  font-weight: bold;
}
em {
  font-size:var(--global-font-size);
  font-style:italic;
  font-family:var(--font-stack);
  color:var(--font-color)
}
blockquote,
code,
em,
strong {
  line-height:var(--global-line-height)
}
blockquote,
code,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
li,
ol,
p,
section,
ul,
.logo {
  float:none;
  margin:0;
  padding:0
}
blockquote,
h1,
ol,
p,
ul,
.logo {
  margin-top:calc(var(--global-space) * 2);
  margin-bottom:calc(var(--global-space) * 2)
}
h1,
.logo {
  position:relative;
  padding:calc(var(--global-space) * 2)0;
  margin:0;
  overflow:hidden;
  font-weight:600
}
h1::after {
  content:"====================================================================================================";
  position:absolute;
  bottom:5px;
  left:0;
  display:var(--display-h1-decoration)
}
h1+*,
.logo+* {
  margin-top:0
}
h2,
h3,
h4,
h5,
h6 {
  position:relative;
  margin-bottom:var(--global-line-height);
  font-weight:600
}
blockquote {
  position:relative;
  padding-left:calc(var(--global-space) * 2);
  overflow:hidden
}
blockquote::after {
  content:">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
  white-space:pre;
  position:absolute;
  top:0;
  left:0;
  line-height:var(--global-line-height);
  color:#9ca2ab
}
blockquote>*:last-child {
  margin-bottom:0
}
code {
  font-weight:inherit;
  background-color:var(--code-bg-color);
  font-family:var(--mono-font-stack)
}
code::after,
code::before {
  content:"`";
  display:inline
}
pre code::after,
pre code::before {
  content:""
}
pre {
  display:block;
  word-break:break-all;
  word-wrap:break-word;
  color:var(--secondary-color);
  background-color:var(--block-background-color);
  border:1px solid var(--secondary-color);
  padding:var(--global-space);
  white-space:pre-wrap;
  white-space:-moz-pre-wrap;
  white-space:-o-pre-wrap
}
pre code {
  overflow-x:scroll;
  padding:0;
  margin:0;
  display:inline-block;
  min-width:100%;
  font-family:var(--mono-font-stack);
  background-color:var(--block-background-color)
}
.terminal blockquote,
.terminal h1,
.terminal h2,
.terminal h3,
.terminal h4,
.terminal h5,
.terminal h6,
.terminal strong,
.terminal .logo {
  font-size:var(--global-font-size);
  font-style:normal;
  font-family:var(--font-stack)
}
.terminal code {
  font-size:var(--global-font-size);
  font-style:normal
}

.terminal-prompt {
  position:relative;
  white-space:nowrap
}
.terminal-prompt::before {
  content:"> "
}
.terminal-prompt::after {
  content:"";
  animation:cursor 800ms infinite;
  background:var(--primary-color);
  border-radius:0;
  display:inline-block;
  height:1em;
  margin-left:.2em;
  width:3px;
  bottom:-2px;
  position:relative
}
@keyframes cursor {
  0% {
    opacity:0
  }
  50% {
    opacity:1
  }
  100% {
    opacity:0
  }
}
@keyframes cursor {
  0% {
    opacity:0
  }
  50% {
    opacity:1
  }
  100% {
    opacity:0
  }
}
li,
li>ul>li {
  position:relative;
  display:block;
  padding-left:calc(var(--global-space) * 2)
}
nav>ul>li {
  padding-left:0
}
li::after {
  position:absolute;
  top:0;
  left:0
}
ul>li::after {
  content:"-"
}
nav ul>li::after {
  content:""
}
ol li::before {
  content:counters(item,".")". ";
  counter-increment:item
}
ol ol li::before {
  content:counters(item,".")" ";
  counter-increment:item
}
.terminal-menu li::after,
.terminal-menu li::before {
  display:none
}
ol {
  counter-reset:item
}
ol li:nth-child(n+10)::after {
  left:-7px
}
ol ol {
  margin-top:0;
  margin-bottom:0
}
.terminal-menu {
  width:100%
}
.terminal-nav {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
ul ul {
  margin-top:0;
  margin-bottom:0
}
.terminal-menu ul {
  list-style-type:none;
  padding:0!important;
  display:flex;
  flex-direction:column;
  width:100%;
  flex-grow:1;
  font-size:var(--global-font-size);
  margin-top:0
}
.terminal-menu li {
  display:flex;
  margin:0 0 .5em;
  padding:0
}
ol.terminal-toc li {
  border-bottom:1px dotted var(--secondary-color);
  padding:0;
  margin-bottom:15px
}
.terminal-menu li:last-child {
  margin-bottom:0
}
ol.terminal-toc li a {
  margin:4px 4px 4px 0;
  background:var(--background-color);
  position:relative;
  top:6px;
  text-align:left;
  padding-right:4px
}
.terminal-menu li a:not(.btn) {
  text-decoration:none;
  display:block;
  width:100%;
  border:none;
  color:var(--secondary-color)
}
.terminal-menu li a.active {
  color:var(--font-color)
}
.terminal-menu li a:hover {
  background:0 0;
  color:inherit
}
ol.terminal-toc li::before {
  content:counters(item,".")". ";
  counter-increment:item;
  position:absolute;
  right:0;
  background:var(--background-color);
  padding:4px 0 4px 4px;
  bottom:-8px
}
ol.terminal-toc li a:hover {
  background:var(--primary-color);
  color:var(--invert-font-color)
}
hr {
  position:relative;
  overflow:hidden;
  margin:calc(var(--global-space) * 4)0;
  border:0;
  border-bottom:1px dashed var(--secondary-color)
}
p {
  margin:0 0 var(--global-line-height)
}
.container {
  max-width:var(--page-width)
}
.container,
.container-fluid {
  margin:0 auto;
  padding:0 calc(var(--global-space) * 2)
}
img {
  max-width:100%
}
.progress-bar {
  height:8px;
  background-color:var(--progress-bar-background);
  margin:12px 0
}
.progress-bar.progress-bar-show-percent {
  margin-top:38px
}
.progress-bar-filled {
  background-color:var(--progress-bar-fill);
  height:100%;
  transition:width .3s ease;
  position:relative;
  width:0
}
.progress-bar-filled::before {
  content:"";
  border:6px solid transparent;
  border-top-color:var(--progress-bar-fill);
  position:absolute;
  top:-6px;
  right:-6px
}
.progress-bar-filled::after {
  color:var(--progress-bar-fill);
  content:attr(data-filled);
  display:block;
  font-size:12px;
  white-space:nowrap;
  position:absolute;
  border:6px solid transparent;
  top:-32px;
  right:0;
  transform:translateX(50%)
}
.progress-bar-no-arrow>.progress-bar-filled::before,
.progress-bar-no-arrow>.progress-bar-filled::after {
  content:"";
  display:none;
  visibility:hidden;
  opacity:0
}
table {
  width:100%;
  border-collapse:collapse;
  margin:var(--global-line-height)0;
  color:var(--font-color);
  font-size:var(--global-font-size)
}
table td,
table th {
  vertical-align:top;
  border:1px solid var(--font-color);
  line-height:var(--global-line-height);
  padding:calc(var(--global-space)/2);
  font-size:1em
}
table thead tr th {
  font-size:1em;
  vertical-align:middle;
  font-weight:700
}
table tfoot tr th {
  font-weight:500
}
table caption {
  font-size:1em;
  margin:0 0 1em
}
.form {
  width:100%
}
fieldset {
  border:1px solid var(--font-color);
  padding:1em
}
label {
  font-size:1em;
  color:var(--font-color)
}
input[type=email],
input[type=text],
input[type=number],
input[type=password],
input[type=search],
input[type=date],
input[type=time] {
  border:1px var(--input-style)var(--font-color);
  width:100%;
  padding:.7em .5em;
  font-size:1em;
  font-family:var(--font-stack);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:0
}
input[type=email]:active,
input[type=text]:active,
input[type=number]:active,
input[type=password]:active,
input[type=search]:active,
input[type=date]:active,
input[type=time]:active,
input[type=email]:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=date]:focus,
input[type=time]:focus {
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:1px solid var(--font-color)
}
input[type=text]:not(:placeholder-shown):invalid,
input[type=email]:not(:placeholder-shown):invalid,
input[type=password]:not(:placeholder-shown):invalid,
input[type=search]:not(:placeholder-shown):invalid,
input[type=number]:not(:placeholder-shown):invalid,
input[type=date]:not(:placeholder-shown):invalid,
input[type=time]:not(:placeholder-shown):invalid {
  border-color:var(--error-color)
}
input,
textarea {
  color:var(--font-color);
  background-color:var(--background-color)
}
input::placeholder,
textarea::placeholder {
  color:var(--secondary-color)!important;
  opacity:1
}
textarea {
  height:auto;
  width:100%;
  resize:none;
  border:1px var(--input-style)var(--font-color);
  padding:.5em;
  font-size:1em;
  font-family:var(--font-stack);
  appearance:none;
  border-radius:0
}
textarea:focus {
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:1px solid var(--font-color)
}
textarea:not(:placeholder-shown):invalid {
  border-color:var(--error-color)
}
select {
  border:1px var(--input-style)var(--font-color);
  width:100%;
  padding:.7em .5em;
  font-size:1em;
  font-family:var(--font-stack);
  color:var(--font-color);
  border-radius:0;
  -webkit-appearance:none;
  appearance: none;
  -moz-appearance:none;
  background-color:var(--background-color);
  background-image:url("data:image/svg+xml;utf8,<svg fill='currentColor' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat:no-repeat;
  background-position:right .5em bottom .5em
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border:1px solid var(--font-color);
  -webkit-text-fill-color:var(--font-color);
  box-shadow:0 0 0 1e3px var(--invert-font-color)inset;
  transition:background-color 5e3s ease-in-out 0s
}
.form-group {
  margin-bottom:var(--global-line-height);
  overflow:auto
}

.image-grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--page-width) / 12, 1fr)));
  grid-gap: 1em;
}

.btn {
  border-style:solid;
  border-width:1px;
  display:inline-flex;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:center;
  justify-content:center;
  cursor:pointer;
  outline:none;
  padding:.65em 2em;
  font-size:1em;
  font-family:inherit;
  user-select:none;
  position:relative;
  z-index:1
}
.btn:active {
  box-shadow:none
}
.btn.btn-ghost {
  border-color:var(--font-color);
  color:var(--font-color);
  background-color:initial
}
.btn.btn-ghost:focus,
.btn.btn-ghost:hover {
  border-color:var(--tertiary-color);
  color:var(--tertiary-color);
  z-index:2
}
.btn.btn-ghost:hover {
  background-color:initial
}
.btn-block {
  width:100%;
  display:flex
}
.btn-default {
  background-color:var(--font-color);
  border-color:var(--invert-font-color);
  color:var(--invert-font-color)
}
.btn-default:hover,
.btn-default:focus:not(.btn-ghost) {
  background-color:var(--secondary-color);
  color:var(--invert-font-color)
}
.btn-default.btn-ghost:focus,
.btn-default.btn-ghost:hover {
  border-color:var(--secondary-color);
  color:var(--secondary-color);
  z-index:2
}
.btn-error {
  color:var(--invert-font-color);
  background-color:var(--error-color);
  border:1px solid var(--error-color)
}
.btn-error:hover,
.btn-error:focus:not(.btn-ghost) {
  background-color:var(--error-color);
  border-color:var(--error-color)
}
.btn-error.btn-ghost {
  border-color:var(--error-color);
  color:var(--error-color)
}
.btn-error.btn-ghost:focus,
.btn-error.btn-ghost:hover {
  border-color:var(--error-color);
  color:var(--error-color);
  z-index:2
}
.btn-primary {
  color:var(--invert-font-color);
  background-color:var(--primary-color);
  border:1px solid var(--primary-color)
}
.btn-primary:hover,
.btn-primary:focus:not(.btn-ghost) {
  background-color:var(--primary-color);
  border-color:var(--primary-color)
}
.btn-primary.btn-ghost {
  border-color:var(--primary-color);
  color:var(--primary-color)
}
.btn-primary.btn-ghost:focus,
.btn-primary.btn-ghost:hover {
  border-color:var(--primary-color);
  color:var(--primary-color);
  z-index:2
}
.btn-small {
  padding:.5em 1.3em!important;
  font-size:.9em!important
}
.btn-group {
  overflow:auto
}
.btn-group .btn {
  float:left
}
.btn-group .btn-ghost:not(:first-child) {
  margin-left:-1px
}
.terminal-card {
  border:2px solid var(--secondary-color);
  margin-bottom: 16px
}
.terminal-card>header {
  color:var(--invert-font-color);
  text-align:center;
  background-color:var(--secondary-color);
  padding:.5em 0;
  font-size: 17px
}
.terminal-card>div:first-of-type {
  background-color: white;
  padding:var(--global-space)
}
.terminal-timeline {
  position:relative;
  padding-left:70px
}
.terminal-timeline::before {
  content:' ';
  background:var(--secondary-color);
  display:inline-block;
  position:absolute;
  left:35px;
  width:2px;
  height:100%;
  z-index:400
}
.terminal-timeline .terminal-card {
  margin-bottom:25px
}
.terminal-timeline .terminal-card::before {
  content:' ';
  background:var(--invert-font-color);
  border:2px solid var(--secondary-color);
  display:inline-block;
  position:absolute;
  margin-top:25px;
  left:26px;
  width:15px;
  height:15px;
  z-index:400
}
.terminal-alert {
  color:var(--font-color);
  padding:1em;
  border:1px solid var(--font-color);
  margin-bottom:var(--global-space)
}
.terminal-alert-error {
  color:var(--error-color);
  border-color:var(--error-color)
}
.terminal-alert-primary {
  color:var(--primary-color);
  border-color:var(--primary-color)
}
@media screen and (min-width:960px) {
  label {
    display:block;
    width:100%
  }
  pre::-webkit-scrollbar {
    height:3px
  }
}
@media screen and (min-width:480px) {
  form {
    width:100%
  }
}
@media screen and (min-width:30rem) {
  .terminal-nav {
    flex-direction:row;
    align-items:center
  }
  .terminal-menu ul {
    flex-direction:row;
    place-items:center flex-end;
    justify-content:flex-end;
    margin-top:calc(var(--global-space) * 2)
  }
  .terminal-menu li {
    margin:0 2em 0 0
  }
  .terminal-menu li:last-child {
    margin-right:0
  }
}
.terminal-media:not(:last-child) {
  margin-bottom:1.25rem
}
.terminal-media-left {
  padding-right:var(--global-space)
}
.terminal-media-left,
.terminal-media-right {
  display:table-cell;
  vertical-align:top
}
.terminal-media-right {
  padding-left:var(--global-space)
}
.terminal-media-body {
  display:table-cell;
  vertical-align:top
}
.terminal-media-heading {
  font-size:1em;
  font-weight:700
}
.terminal-media-content {
  margin-top:.3rem
}
.terminal-placeholder {
  background-color:var(--secondary-color);
  text-align:center;
  color:var(--font-color);
  font-size:1rem;
  border:1px solid var(--secondary-color)
}
figure>img {
  padding:0
}
.terminal-avatarholder {
  width:calc(var(--global-space) * 5);
  height:calc(var(--global-space) * 5)
}
.terminal-avatarholder img {
  padding:0
}
figure {
  margin:0
}
figure>figcaption {
  color:var(--secondary-color);
  text-align:center
}
.terminal-banner {
  background-color:var(--font-color);
  color:var(--invert-font-color);
  padding:calc(var(--global-space) * 2);
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1rem
}
.terminal-banner>.container {
  max-width:var(--page-width)
}
.terminal-banner>.container,
.terminal-banner>.container-fluid {
  margin:0 auto;
  padding:0
}
@media screen and (min-width:30rem) {
  .terminal-banner {
    flex-direction:row
  }
}
.hljs {
  display:block;
  overflow-x:auto;
  padding:.5em;
  background:var(--block-background-color);
  color:var(--font-color)
}
.hljs-comment,
.hljs-quote {
  color:var(--secondary-color)
}
.hljs-variable {
  color:var(--font-color)
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
  color:var(--primary-color)
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
  color:var(--secondary-color)
}
.hljs-string {
  color:var(--secondary-color)
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
  color:var(--primary-color)
}
.hljs-doctag {
  color:var(--secondary-color)
}
.hljs-attr {
  color:var(--primary-color)
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color:var(--primary-color)
}
.hljs-emphasis {
  font-style:italic
}
.hljs-strong {
  font-weight:700
}