.docs-content details {
  border: 1px solid var(--x-primary);
  background: 1px solid var(--x-border);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

@media (prefers-color-scheme: dark) {
  .docs-content details {
    border: 1px solid var(--x-border);
    color: var(--x-info);
  }
}

.docs-content details[open] {
}

.docs-content details > div {
  margin-top: 8px;
}

.docs-content summary {
  font-weight: bold;
  cursor: pointer;
  height: 24px;
  line-height: 24px;
}

.docs-content code-example[lang="mermaid"] > svg {
  margin: 20px 0 30px;
}

.docs-content .inline-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  color: var(--x-accent);
}

.docs-content .inline-icon.warning {
  color: var(--x-warning);
}

.docs-content .inline-icon.danger {
  color: var(--x-danger);
}

.docs-content h1 {
  font-size: 32px;
  display: block;
}

.docs-content h2 {
  font-size: 24px;
  display: block;
}

.docs-content h3 {
  font-size: 20px;
  display: block;
}

.docs-content h3 code {
  font-size: inherit;
  display: inline-block;
  border: transparent;
  background: transparent;
}

.docs-content h4 {
  font-size: 18px;
  display: block;
}

.docs-content h1 a,
.docs-content h2 a,
.docs-content h3 a {
  background: var(--x-accent);
  border: 0;
  min-height: inherit;
  padding: 10px 8px;
  color: white;
  border-radius: 6px;
  font-size: inherit;
}

.docs-content h1 a code,
.docs-content h2 a code,
.docs-content h3 a code {
  font-size: inherit;
}

.docs-content a {
  color: var(--x-accent);
  border-bottom: 1px solid;
  min-height: inherit;
}

.docs-content object {
  margin: 10px auto;
  display: inline-block;
  display: flex;
}

.docs-content [alt="image-with-drop-shadow"] {
  border-radius: 12px;
  box-shadow: 0px 10px 10px var(--x-shadow);
}

/* Old */

.diagram {font-family: var(--x-body);font-size:16px;fill:transparent;}
.diagram .error-icon{fill:#aaa;}
.diagram .error-text{fill:#552222;stroke:#552222;}
.diagram .edge-thickness-normal{stroke-width:2px;}
.diagram .edge-thickness-thick{stroke-width:3.5px;}
.diagram .edge-pattern-solid{stroke-dasharray:0;}
.diagram .edge-pattern-dashed{stroke-dasharray:3;}
.diagram .edge-pattern-dotted{stroke-dasharray:2;}
.diagram .marker{fill:#333333;stroke:#333333;}
.diagram .marker.cross{stroke:#333333;}
.diagram svg{font-family: var(--x-body);font-size:16px;}
.diagram .actor{stroke: var(--x-border); fill: var(--x-window);}
.diagram text.actor > tspan{fill:currentColor;stroke:none;}
.diagram .actor-line{stroke:var(--x-border);}
.diagram .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:var(--x-primary);}
.diagram .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:var(--x-primary);}
.diagram #arrowhead path{fill:var(--x-primary);stroke:var(--x-primary);}
.diagram .sequenceNumber{fill:white;}
.diagram #sequencenumber{fill:var(--x-primary);}
.diagram #crosshead path{fill:var(--x-primary);stroke:var(--x-primary);}
.diagram .messageText{fill:var(--x-primary);stroke:none;}
.diagram .labelBox{stroke:var(--x-primary);fill:#f7f7f7;}
.diagram .labelText, .diagram .labelText>tspan{fill:black;stroke:none;}
.diagram .loopText, .diagram .loopText>tspan{fill:black;stroke:none;}
.diagram .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:var(--x-border);fill:var(--x-background);}
.diagram .note{stroke:#aaaa33;fill:#fff5ad;}
.diagram .noteText,.diagram .noteText>tspan{fill:black;stroke:none;}
.diagram .activation0{fill:#f4f4f4;stroke:#666;}
.diagram .activation1{fill:#f4f4f4;stroke:#666;}
.diagram .activation2{fill:#f4f4f4;stroke:#666;}
.diagram .actorPopupMenu{position:absolute;}
.diagram .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}
.diagram .actor-man line{stroke:var(--x-border);fill:#f7f7f7;}
.diagram .actor-man circle,
.diagram line{stroke:var(--x-border);fill:var(--x-background);stroke-width: 1px;}

body section.primer {
  padding: 4% 10%;
}

blog-post x-tabs {
  display: block;
  margin-bottom: 20px;
}

blog-post x-tabs .x--tab {
  margin-right: 20px;
  color: var(--x-accent);
  font-size: 16px !important;
}

blog-post x-tabs .x--tab[aria-selected="true"] {
  border-bottom: 2px solid var(--x-accent) !important;
}

blog-post {
  padding: 10%;
  display: block;
}

blog-post {
  line-height: 22px;
  font-size: 16px;
}

blog-post blog-post:not([src]) {
  margin-bottom: -20%;
}

blog-post blog-post blog-post {
  display: none;
}

body:not(#index) section.primer h2:first-of-type {
  margin-top: 10px;
}

body blog-post h3 {
  font-size: 24px;
  font-weight: 100;
  font-family: var(--x-body);
  margin-top: 60px;
}

body blog-post ul {
  padding: 0 30px;
}

body blog-post li {
  margin: 8px 0;
  line-height: 20px;
}

body blog-post p a {
  display: inline-block;
}

body blog-post cite {
  font-size: 14px;
  font-style: initial;
  background: var(--x-primary);
  color: var(--x-window);
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--x-monospace);
  margin-top: 60px;
}

body blog-post h3 code {
  font-size: inherit;
}

body blog-post h3 em code {
  font-size: 14px;
  padding: 4px;
  position: relative;
  border-radius: 4px;
  color: var(--x-secondary);
  top: -2px;
}

body blog-post table + p > strong {
  font-size: 10px;
  border: 1px solid var(--x-accent);
  padding: 4px;
  border-radius: 4px;
  background: var(--x-window);
  color: var(--x-accent);
  text-transform: uppercase;
  vertical-align: middle;
}

body blog-post.code h2,
body blog-post.code h3,
body blog-post.code h4 {
  font-family: var(--x-monospace);
}

body blog-post h2 code,
body blog-post h3 code,
body blog-post h4 code {
  font-size: inherit;
  display: inline;
}

body blog-post blockquote,
body blog-post blockquote {
  margin: 0;
}

.complexity {
  display: grid;
  grid-tempalte-rows: 40px 1fr;
  grid-template-columns: repeat(3, auto);
  justify-content: space-around;
  border: 1px solid var(--x-border);
  align-items: end;
  height: 480px;
  position: relative;
  background: var(--x-background);
  margin-bottom: 40px;
}

blog-post .complexity > p {
  grid-area: 1 / span 3;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 60%;
}

.complexity > div {
  align-self: baseline;
  height: 256px;
  text-align: center;
  line-height: 24px;
  margin-top: 100px;
}

.complexity > div > div {
  margin: auto;
  min-height: 4px;
  max-width: 40px;
  background: var(--x-primary);
  margin-bottom: 20px;
}

@media (max-width: 699px) {
  body section.primer,
  blog-post blog-post {
    padding: 30px;
  }
}