:root {
  /* colors */
  --color-jet-90: #15161c;
  --color-smoke-50: #beb9b0;
  --color-white-20: #e8e6e3;
  /* fonts */
  --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
  --body-font-weight-bold: 500;
  /* base */
  --panel-background: var(--color-jet-90);
  /* admonitions */
  --caution-color: #80367d;
  --caution-on-color: var(--color-white-20);
  --important-color: #a72323;
  --important-on-color: var(--color-white-20);
  --note-color: #135eb3;
  --note-on-color: var(--color-white-20);
  --tip-color: #348c38;
  --tip-on-color: var(--color-white-20);
  --warning-color: #b46710;
  --warning-on-color: var(--color-white-20);
  /* doc */
  --admonition-background: var(--panel-background);
  --admonition-label-font-weight: var(--body-font-weight-bold);
  --caption-font-color: var(--color-smoke-50);
  --caption-font-weight: var(--body-font-weight-bold);
}

/*
Callouts
*/
.conum[data-value] {
  display: inline-block;
  color: #242930 !important;
  background: #57cc8a;
  border-radius: 50%;
  text-align: center;
  font-size: 0.75em;
  width: 1.67em;
  height: 1.67em;
  line-height: 1.67em;
  font-family: "Open Sans", "DejaVu Sans", sans-serif;
  font-style: normal;
  font-weight: bold;
}

.conum[data-value] * {
  color: #242930 !important;
}

.conum[data-value] + b {
  display: none;
}

.conum[data-value]::after {
  content: attr(data-value);
}

pre .conum[data-value] {
  position: relative;
  top: -0.125em;
}

b.conum * {
  color: inherit !important;
}

.conum:not([data-value]):empty {
  display: none;
}

/*
Admonition blocks
*/
.admonitionblock .icon i.fa {
  font-family: sans-serif;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: revert;
}

i.fa {
  display: inline-block;
  background: no-repeat center / 1em 1em;
  filter: var(--doc-icon-filter);
  hyphens: none;
  font-style: normal;
  height: 1em;
  width: 1em;
  vertical-align: -0.125em;
}

.admonitionblock td.content {
  padding: 1.5rem 1rem 0.75rem;
  background: var(--admonition-background);
  width: 100%;
  word-wrap: anywhere;
}

.admonitionblock td.icon {
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(15 / var(--rem-base) * 1rem);
  line-height: 1;
  border-radius: 0.5em;
  padding: 0.25em 0.075em;
}

.admonitionblock td.icon i {
  display: inline-flex;
  align-items: center;
  width: auto;
  background-position-x: 0.5em;
  background-position-y: 0;
  filter: invert(100%);
  /* vertical-align: initial; */
}

.admonitionblock td.icon i::after {
  content: attr(title);
  text-transform: uppercase;
  filter: invert(100%); /* NOTE reverse the filter on the icon */
  font-weight: var(--admonition-label-font-weight);
  font-style: normal;
  padding: 0 0.5em;
  margin: -0.05em; /* NOTE account for slight offset in font */
}

.admonitionblock {
  margin: 1.4rem 0 0;
}
.admonitionblock p,
.admonitionblock td.content {
  font-size: 0.88889rem;
  font-size: calc(16 / var(--rem-base) * 1rem);
}
.admonitionblock td.content > .title + *,
.admonitionblock td.content > :not(.title):first-child {
  margin-top: 0;
}
.admonitionblock pre {
  font-size: 0.83333rem;
  font-size: calc(15 / var(--rem-base) * 1rem);
}
.admonitionblock > table {
  table-layout: fixed;
  position: relative;
  width: 100%;
}
.admonitionblock td.icon i::after {
  content: attr(title);
  text-transform: uppercase;
  filter: invert(100%);
  font-weight: 500;
  font-weight: var(--admonition-label-font-weight);
  font-style: normal;
  padding: 0 0.5em;
  margin: -0.05em;
}
.admonitionblock.caution td.icon {
  background-color: #802392;
  background-color: var(--caution-color);
  color: #fff;
  color: var(--caution-on-color);
}
.admonitionblock.important td.icon {
  background-color: #e40046;
  background-color: var(--important-color);
  color: #fff;
  color: var(--important-on-color);
}
.admonitionblock.note td.icon {
  background-color: #2d7dd2;
  background-color: var(--note-color);
  color: #fff;
  color: var(--note-on-color);
}
.admonitionblock.tip td.icon {
  background-color: #43b929;
  background-color: var(--tip-color);
  color: #fff;
  color: var(--tip-on-color);
}
.admonitionblock.warning td.icon {
  background-color: #f70;
  background-color: var(--warning-color);
  color: #fff;
  color: var(--warning-on-color);
}
.admonitionblock .listingblock {
  padding: 0;
}
.admonitionblock .title {
  color: #5d5d5d;
  color: var(--caption-font-color);
  font-size: 0.88889rem;
  font-size: calc(16 / var(--rem-base) * 1rem);
  font-weight: 500;
  font-weight: var(--caption-font-weight);
  font-style: italic;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  letter-spacing: 0.01em;
  padding-bottom: 0.075rem;
  text-align: left;
}

/*
Float Groups
*/
.float-group {
  width: 100%;
  overflow: hidden;
}

.float-group .left {
  float: left;
  padding: 20px;
}

/*
Listing block (title in source code block)
*/
.listingblock .title {
  font-style: italic;
  font-weight: bold;

  background: #282a36;
  color: #f8f8f2;
  border-left: 0.4em solid #2d7dd2;
  padding-left: 1em;
  margin-bottom: -0.7em;
}
