/*
    This file is part of m.css.

    Copyright © 2017, 2018, 2019, 2020, 2021, 2022, 2023
              Vladimír Vondruš <mosra@centrum.cz>

    Permission is hereby granted, free of charge, to any person obtaining a
    copy of this software and associated documentation files (the "Software"),
    to deal in the Software without restriction, including without limitation
    the rights to use, copy, modify, merge, publish, distribute, sublicense,
    and/or sell copies of the Software, and to permit persons to whom the
    Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included
    in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
    DEALINGS IN THE SOFTWARE.
*/

/* Globals */
html {
  font-size: var(--font-size);
  background-color: var(--background-color);
}
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--color);
}

/* Block elements */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: var(--heading-font-weight);
}
h1 {
  margin-bottom: 1rem;
}
h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
}
p, ul, ol, dl {
  margin-top: 0;
}
ul, ol {
  padding-left: 2rem;
}
ul ol, ul ul, ol ol, ol ul {
  margin-bottom: 0;
}
main p {
  text-indent: var(--paragraph-indent);
  text-align: var(--paragraph-align);
}
/* Remove indentation and justification where it doesn't make sense */
main p.m-noindent, li > p, dd > p, table.m-table td > p {
  text-indent: 0;
  text-align: left;
}
blockquote {
  margin-top: 0;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 1rem;
  border-left-style: solid;
  border-left-width: 0.25rem;
}
hr {
  width: 75%;
  border-width: 0.0625rem;
  border-style: solid;
}
blockquote, hr {
  border-color: var(--line-color);
}

/* Inline elements */
strong, .m-text.m-strong { font-weight: bold; }
em, .m-text.m-em { font-style: italic; }
s, .m-text.m-s { text-decoration: line-through; }
sub, sup, .m-text.m-sub, .m-text.m-sup {
  /* https://gist.github.com/unruthless/413930 */
  font-size: 0.75rem;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup, .m-text.m-sup { top: -0.35rem; }
sub, .m-text.m-sub { bottom: -0.2rem; }
abbr {
  cursor: help;
  text-decoration: underline dotted;
}
a {
  color: var(--link-color);
}
a.m-flat {
  text-decoration: none;
}
a:hover, a:focus, a:active {
  color: var(--link-active-color);
}
a img { border: 0; } /* Why you so special, IE?! */
svg a { cursor: pointer; } /* And why YOU, CHROME?! */
mark {
  padding: 0.0625rem;
  background-color: var(--mark-background-color);
  color: var(--mark-color);
}
.m-link-wrap {
  word-break: break-all;
}

/* Block/inline code */
pre, code {
  font-family: var(--code-font), monospace, monospace; /* https://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
  font-size: var(--code-font-size);
  color: var(--code-color);
  background-color: var(--code-background-color);
}
pre.m-console, code.m-console {
  color: var(--console-color);
  background-color: var(--console-background-color);
}
pre {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  overflow-x: auto;
  margin-top: 0; /* stupid defaults */
}
pre.m-console-wrap {
  white-space: pre-wrap;
  word-break: break-all;
}
code {
  padding: 0.125rem;
}

/* Focus outline on link, canvas and input: match the focused header item. */
*:focus { outline-color: var(--header-link-current-color); }

/* Utility */
div.m-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.m-fullwidth {
  width: 100%;
}
.m-spacing-150 {
  /* saying 1.5 should be better according to https://stackoverflow.com/a/20818206,
     but here I need consistent spacing together with .m-big etc. */
  line-height: 1.5rem;
}
.m-text-center, .m-text-center.m-noindent, table.m-table th.m-text-center, .m-text-center p {
  text-align: center;
}
.m-text-left, .m-text-left.m-noindent, table.m-table th.m-text-left, .m-text-right p {
  text-align: left;
}
.m-text-right, .m-text-right.m-noindent, table.m-table th.m-text-right, .m-text-right p {
  text-align: right;
}
.m-text-top, table.m-table th.m-text-top, table.m-table td.m-text-top {
  vertical-align: top;
}
.m-text-middle, table.m-table th.m-text-middle, table.m-table td.m-text-middle {
  vertical-align: middle;
}
.m-text-bottom, table.m-table th.m-text-bottom, table.m-table td.m-text-bottom {
  vertical-align: bottom;
}
.m-text.m-tiny { font-size: 50.0%; }
.m-text.m-small { font-size: 85.4%; }
.m-text.m-big { font-size: 117%; }
h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
  font-weight: normal;
}

/* Lists */
ul.m-unstyled, ol.m-unstyled {
  list-style-type: none;
  padding-left: 0;
}
ul[class*='m-block-'], ol[class*='m-block-'] {
  padding-left: 0;
}
ul[class*='m-block-'] li, ol[class*='m-block-'] li {
  display: inline;
}
ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
  content: " | ";
}
ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
  content: " • ";
}
@media screen and (min-width: 576px) {
  ul.m-block-bar-s, ol.m-block-bar-s,
  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
  ul.m-block-bar-s li, ol.m-block-bar-s li,
  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
}
@media screen and (min-width: 768px) {
  ul.m-block-bar-m, ol.m-block-bar-m,
  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
  ul.m-block-bar-m li, ol.m-block-bar-m li,
  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
}
@media screen and (min-width: 992px) {
  ul.m-block-bar-l, ol.m-block-bar-l,
  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
  ul.m-block-bar-l li, ol.m-block-bar-l li,
  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
}

/* Special paragraph styling */
p.m-poem {
  text-indent: 0;
  text-align: left;
  margin-left: var(--paragraph-indent);
}
p.m-transition {
  color: var(--line-color);
  text-indent: 0;
  text-align: center;
  font-size: 2rem;
}

/* Definition list styling */
dl.m-diary {
  margin-bottom: 1.25rem;
}
dl.m-diary:last-child {
  margin-bottom: 0.25rem;
}
dl.m-diary dt {
  font-weight: bold;
  width: 6rem; /* Large enough so it can fit a date (Aug 27, 2019) as well */
  float: left;
  clear: both;
  padding-top: 0.25rem;
}
dl.m-diary dd {
  padding-top: 0.25rem;
  padding-left: 6rem;
  margin-left: 0;
}

/* Footnotes, footnote references */
a.m-footnote, dl.m-footnote dd span.m-footnote {
  top: -0.35rem; /* Same as .m-text.m-sup */
  font-size: 0.75rem;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
a.m-footnote, dl.m-footnote dd span.m-footnote a {
  text-decoration: none;
}
a.m-footnote::before { content: '['; }
a.m-footnote::after { content: ']'; }
dl.m-footnote dt {
  width: 1.5rem;
  float: left;
  clear: both;
}
dl.m-footnote dd {
  margin-left: 1.5rem;
}
dl.m-footnote { /* Same as .m-small */
  font-size: 85.4%;
}
dl.m-footnote dd span.m-footnote a {
  font-weight: bold;
  font-style: italic;
}

/* Note, frame, block */
.m-note {
  border-radius: var(--border-radius);
  padding: 1rem;
}
.m-frame {
  background-color: var(--background-color);
  border-style: solid;
  border-width: 0.125rem;
  border-radius: var(--border-radius);
  border-color: var(--line-color);
  padding: 0.875rem;
}
.m-block {
  border-style: solid;
  border-width: 0.0625rem;
  border-left-width: 0.25rem;
  border-radius: var(--border-radius);
  border-color: var(--line-color);
  padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem;
}

/* Badge */
.m-block.m-badge::after {
  content: ' ';
  display: block;
  clear: both;
}
.m-block.m-badge h3 {
  margin-left: 5rem;
}
.m-block.m-badge p {
  margin-left: 5rem;
  text-indent: 0;
}
.m-block.m-badge img {
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  float: left;
}

/* Button */
div.m-button {
  text-align: center;
}
div.m-button a {
  display: inline-block;
  border-radius: var(--border-radius);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-decoration: none;
  font-size: 1.17rem;
}
div.m-button.m-fullwidth a {
  display: block;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
div.m-button a .m-big:first-child {
  font-size: 1.37rem;
  font-weight: bold;
}
div.m-button a .m-small:last-child {
  font-size: 0.854rem;
}

/* Label */
.m-label {
  border-radius: var(--border-radius);
  font-size: 75%;
  font-weight: normal;
  padding: 0.125rem 0.25rem;
  vertical-align: 7.5%;
}
.m-label.m-flat {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--dim-color);
  padding: 0.0625rem 0.1875rem;
}

/* Tables */
table.m-table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}
table.m-table.m-big {
  margin-top: 1.75rem;
}
div.m-scroll > table.m-table:last-child {
  margin-bottom: 0.0625rem;
}
table.m-table:not(.m-flat) tbody tr:hover {
  background-color: var(--line-color);
}
table.m-table th, table.m-table td {
  vertical-align: top;
  border-style: solid;
  border-top-width: 0.0625rem;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-color: var(--line-color);
}
table.m-table caption {
  padding-bottom: 0.5rem;
}
table.m-table thead tr:first-child th, table.m-table thead tr:first-child td {
  border-top-width: 0.125rem;
}
table.m-table thead th, table.m-table thead td {
  border-bottom-width: 0.125rem;
  vertical-align: bottom;
}
table.m-table tfoot th, table.m-table tfoot td {
  border-top-width: 0.125rem;
}
table.m-table th, table.m-table td {
  padding: 0.5rem;
}
table.m-table.m-big th, table.m-table.m-big td {
  padding: 0.75rem 1rem;
}
table.m-table th {
  text-align: left;
}
table.m-table th.m-thin {
  font-weight: normal;
}
table.m-table td.m-default, table.m-table th.m-default,
table.m-table td.m-primary, table.m-table th.m-primary,
table.m-table td.m-success, table.m-table th.m-success,
table.m-table td.m-warning, table.m-table th.m-warning,
table.m-table td.m-danger, table.m-table th.m-danger,
table.m-table td.m-info, table.m-table th.m-info,
table.m-table td.m-dim, table.m-table th.m-dim {
  padding-left: 0.4375rem;
  padding-right: 0.4375rem;
  border-left-width: 0.0625rem;
/*   border-right-width: 0.0625rem; causes horizontal scrollbar */
}
table.m-table.m-big td.m-default, table.m-table.m-big th.m-default,
table.m-table.m-big td.m-primary, table.m-table.m-big th.m-primary,
table.m-table.m-big td.m-success, table.m-table.m-big th.m-success,
table.m-table.m-big td.m-warning, table.m-table.m-big th.m-warning,
table.m-table.m-big td.m-danger, table.m-table.m-big th.m-danger,
table.m-table.m-big td.m-info, table.m-table.m-big th.m-info,
table.m-table.m-big td.m-dim, table.m-table.m-big th.m-dim {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  border-left-width: 0.0625rem;
/*   border-right-width: 0.0625rem; causes horizontal scrollbar */
}

table.m-table tr.m-default td, table.m-table td.m-default,
table.m-table tr.m-default th, table.m-table th.m-default,
table.m-table tr.m-primary td, table.m-table td.m-primary,
table.m-table tr.m-primary th, table.m-table th.m-primary,
table.m-table tr.m-success td, table.m-table td.m-success,
table.m-table tr.m-success th, table.m-table th.m-success,
table.m-table tr.m-warning td, table.m-table td.m-warning,
table.m-table tr.m-warning th, table.m-table th.m-warning,
table.m-table tr.m-danger td, table.m-table td.m-danger,
table.m-table tr.m-danger th, table.m-table th.m-danger,
table.m-table tr.m-info td, table.m-table td.m-info,
table.m-table tr.m-info th, table.m-table th.m-info,
table.m-table tr.m-dim td, table.m-table td.m-dim,
table.m-table tr.m-dim th, table.m-table th.m-dim {
  border-color: var(--background-color);
}

/* Code on a colored background has a semi-transparent background */
.m-note pre, .m-note code,
table.m-table tr.m-default pre, table.m-table tr.m-default code,
table.m-table td.m-default pre, table.m-table td.m-default code,
table.m-table th.m-default pre, table.m-table th.m-default code,
table.m-table tr.m-primary pre, table.m-table tr.m-primary code,
table.m-table td.m-primary pre, table.m-table td.m-primary code,
table.m-table th.m-primary pre, table.m-table th.m-primary code,
table.m-table tr.m-success pre, table.m-table tr.m-success code,
table.m-table td.m-success pre, table.m-table td.m-success code,
table.m-table th.m-success pre, table.m-table th.m-success code,
table.m-table tr.m-warning pre, table.m-table tr.m-warning code,
table.m-table td.m-warning pre, table.m-table td.m-warning code,
table.m-table th.m-warning pre, table.m-table th.m-warning code,
table.m-table tr.m-danger pre, table.m-table tr.m-danger code,
table.m-table td.m-danger pre, table.m-table td.m-danger code,
table.m-table th.m-danger pre, table.m-table th.m-danger code,
table.m-table tr.m-info pre, table.m-table tr.m-info code,
table.m-table td.m-info pre, table.m-table td.m-info code,
table.m-table th.m-info pre, table.m-table th.m-info code,
table.m-table tr.m-dim pre, table.m-table tr.m-dim code,
table.m-table td.m-dim pre, table.m-table td.m-dim code,
table.m-table th.m-dim pre, table.m-table th.m-dim code {
  background-color: var(--code-note-background-color);
}

/* Image. Ensure everything is done for <img>, <svg> and <video> as well. */
img.m-image, svg.m-image, video.m-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
div.m-image {
  text-align: center;
}
img.m-image, svg.m-image, video.m-image,
div.m-image img, div.m-image svg, div.m-image video {
  max-width: 100%;
  border-radius: var(--border-radius);
}
div.m-image.m-fullwidth img,
div.m-image.m-fullwidth svg,
div.m-image.m-fullwidth video {
  width: 100%;
}
/* Image badge. Deliberately omitting <svg> since I don't see any use for those
   as avatars yet, <video> as well. */
img.m-image.m-badge, div.m-image.m-badge img {
  border-radius: 50%;
}

/* Figure. Ensure everything is done for <img>, <svg> and <video> as well. */
figure.m-figure {
  max-width: 100%;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: table;
}
figure.m-figure::before {
  position: absolute;
  content: ' ';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* so it doesn't make the contents inactive */
  border-style: solid;
  border-width: 0.125rem;
  border-radius: var(--border-radius);
  border-color: var(--line-color);
}
figure.m-figure.m-flat::before {
  border-color: transparent;
}
figure.m-figure > * {
  margin-left: 1rem;
  margin-right: 1rem;
  /* So overflowing figcaption or any other content doesn't expand the figure
     border but rather gets wrapped */
  display: table-caption;
  caption-side: bottom;
}
figure.m-figure > *:first-child {
  /* otherwise figure with clickable image is centered differently */
  display: inline;
}
figure.m-figure > *:last-child {
  /* Need !important so the :last-child margin reset doesn't have higher
     priority than this */
  margin-bottom: 1rem !important;
}
figure.m-figure img,
figure.m-figure svg,
figure.m-figure video {
  position: relative; /* so it's above the border */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  max-width: 100%;
}
figure.m-figure.m-flat img,
figure.m-figure.m-flat svg,
figure.m-figure.m-flat video {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
figure.m-figure a img,
figure.m-figure a svg,
figure.m-figure a video {
  margin-left: -1rem;
  margin-right: -1rem;
}
figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
  /* Using inline for the content would lose the margin on wrapped lines */
  display: block;
}
figure.m-figure.m-fullwidth > *:first-child {
  /* otherwise figure with clickable image is centered differently */
  display: inline;
}
figure.m-figure.m-fullwidth img,
figure.m-figure.m-fullwidth svg,
figure.m-figure.m-fullwidth video {
  width: 100%;
}
figure.m-figure.m-fullwidth::after {
  /* Specifying bottom margin on the last element works only if it is displayed
     as table caption, so I have to hack it here. */
  content: ' ';
  display: block;
  margin-top: 1rem;
  height: 1px;
}

/* Code figure. Not using <figure> because some generators (Doxygen) have it
   impossible to output custom tags. */
.m-code-figure, .m-console-figure {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  padding: 1rem;
}
.m-code-figure::before, .m-console-figure::before {
  position: absolute;
  content: ' ';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* so it doesn't make the contents inactive */
  border-style: solid;
  border-width: 0.125rem;
  border-radius: var(--border-radius);
}
.m-code-figure::before {
  border-color: var(--code-background-color);
}
.m-console-figure::before {
  border-color: var(--console-background-color);
}
.m-code-figure.m-flat::before, .m-console-figure.m-flat::before {
  border-color: transparent;
}
.m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
  position: relative; /* so it's above the border */
  margin: -1rem -1rem 1rem -1rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* "Nopad" code block inside a code/console figure -- show code and console
   output nicely packed together */
.m-code-figure > pre.m-nopad, .m-console-figure > pre.m-nopad {
  margin-left: -0.875rem;
  margin-right: -0.875rem;
  margin-top: -1rem;
  margin-bottom: -0.875rem;
  padding-left: 0.875rem;
}

/* Figure caption */
figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: var(--heading-font-weight);
  font-size: 1.17rem; /* taken from webkit defaults for h3 */
}
figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure figcaption a {
  text-decoration: var(--link-decoration-heading);
}
/* Figure description, expected to be inside <figcaption> and has all styling
   from <figcaption> reverted. Originally this was done by adding a <span>
   after <figcaption> but while fine in Chrome, the `display: table-caption;`
   for everything in <figure> made Firefox render just the <figcaption>,
   ignoring everything after that. So it has to be all inside <figcaption>. See
   also https://github.com/mosra/m.css/issues/117 for details. */
figure.m-figure figcaption .m-figure-description {
  margin-top: 0.5rem;
  font-weight: normal;
  font-size: 1rem;
}
figure.m-figure figcaption .m-figure-description a {
  text-decoration: var(--link-decoration);
}

/* Image grid */
.m-imagegrid > div {
  background-color: var(--background-color); /* to avoid section HL shining through */
}
.m-imagegrid > div > figure {
  display: block;
  float: left;
  position: relative;
  margin: 0;
}
.m-imagegrid > div > figure > div,
.m-imagegrid > div > figure > figcaption,
.m-imagegrid > div > figure > a > div,
.m-imagegrid > div > figure > a > figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-color: var(--background-color);
  border-style: solid;
  border-width: 0.25rem;
  padding: 0.5rem;
}
.m-imagegrid > div > figure:first-child > div,
.m-imagegrid > div > figure:first-child > figcaption,
.m-imagegrid > div > figure:first-child > a > div,
.m-imagegrid > div > figure:first-child > a > figcaption {
  border-left-width: 0;
}
.m-imagegrid > div > figure:last-child > div,
.m-imagegrid > div > figure:last-child > figcaption,
.m-imagegrid > div > figure:last-child > a > div,
.m-imagegrid > div > figure:last-child > a > figcaption {
  border-right-width: 0;
}
.m-imagegrid > div > figure > figcaption,
.m-imagegrid > div > figure > a > figcaption {
  color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}
.m-imagegrid > div > figure > div::before,
.m-imagegrid > div > figure > figcaption::before,
.m-imagegrid > div > figure > a > div::before,
.m-imagegrid > div > figure > a > figcaption::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 0;
}
.m-imagegrid > div > figure:hover > figcaption,
.m-imagegrid > div > figure:hover > a > figcaption {
  background: linear-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.85) 100%);
  color: #ffffff;
}
.m-imagegrid > div > figure > img,
.m-imagegrid > div > figure > a > img {
  width: 100%;
  height: 100%;
}
.m-imagegrid > div::after {
  display: block;
  content: ' ';
  clear: both;
}

@media screen and (max-width: 767px) {
  .m-imagegrid > div > figure {
    float: none;
    width: 100% !important;
  }
  .m-imagegrid > div > figure > div,
  .m-imagegrid > div > figure > figcaption,
  .m-imagegrid > div > figure > a > div,
  .m-imagegrid > div > figure > a > figcaption {
    border-left-width: 0;
    border-right-width: 0;
  }
}

/* Inflatable content */
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
.m-container-inflatable > .m-row > [class*='m-col-'] > pre,
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-code-figure,
.m-container-inflatable > .m-row > [class*='m-col-'] > .m-console-figure,
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
.m-container-inflatable > .m-row > [class*='m-col-'] section > pre,
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure,
.m-container-inflatable [class*='m-center-'] > .m-note,
.m-container-inflatable [class*='m-center-'] > .m-frame,
.m-container-inflatable [class*='m-center-'] > .m-block,
.m-container-inflatable [class*='m-center-'] > .m-imagegrid,
.m-container-inflatable [class*='m-center-'] > pre,
.m-container-inflatable [class*='m-center-'] > .m-code-figure,
.m-container-inflatable [class*='m-center-'] > .m-console-figure,
.m-container-inflatable [class*='m-left-'] > .m-note,
.m-container-inflatable [class*='m-left-'] > .m-frame,
.m-container-inflatable [class*='m-left-'] > .m-block,
.m-container-inflatable [class*='m-left-'] > .m-imagegrid,
.m-container-inflatable [class*='m-left-'] > pre,
.m-container-inflatable [class*='m-left-'] > .m-code-figure,
.m-container-inflatable [class*='m-left-'] > .m-console-figure,
.m-container-inflatable [class*='m-right-'] > .m-note,
.m-container-inflatable [class*='m-right-'] > .m-frame,
.m-container-inflatable [class*='m-right-'] > .m-block,
.m-container-inflatable [class*='m-right-'] > .m-imagegrid,
.m-container-inflatable [class*='m-right-'] > pre,
.m-container-inflatable [class*='m-right-'] > .m-code-figure,
.m-container-inflatable [class*='m-right-'] > .m-console-figure,
.m-container-inflatable .m-container-inflate > .m-note,
.m-container-inflatable .m-container-inflate > .m-frame,
.m-container-inflatable .m-container-inflate > .m-block,
.m-container-inflatable .m-container-inflate > .m-imagegrid,
.m-container-inflatable .m-container-inflate > pre,
.m-container-inflatable .m-container-inflate > .m-code-figure,
.m-container-inflatable .m-container-inflate > .m-console-figure
{
  margin-left: -1rem;
  margin-right: -1rem;
}

@media screen and (min-width: 576px) {
  .m-container-inflatable .m-center-s > .m-note,
  .m-container-inflatable .m-center-s > .m-frame,
  .m-container-inflatable .m-center-s > .m-block,
  .m-container-inflatable .m-center-s > .m-imagegrid,
  .m-container-inflatable .m-center-s > pre,
  .m-container-inflatable .m-center-s > .m-code-figure,
  .m-container-inflatable .m-center-s > .m-console-figure {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .m-container-inflatable .m-left-s > .m-note,
  .m-container-inflatable .m-left-s > .m-frame,
  .m-container-inflatable .m-left-s > .m-block,
  .m-container-inflatable .m-left-s > .m-imagegrid,
  .m-container-inflatable .m-left-s > pre,
  .m-container-inflatable .m-left-s > .m-code-figure,
  .m-container-inflatable .m-left-s > .m-console-figure {
    margin-left: -1rem;
    margin-right: 0;
  }
  .m-container-inflatable .m-right-s > .m-note,
  .m-container-inflatable .m-right-s > .m-frame,
  .m-container-inflatable .m-right-s > .m-block,
  .m-container-inflatable .m-right-s > .m-imagegrid,
  .m-container-inflatable .m-right-s > pre,
  .m-container-inflatable .m-right-s > .m-code-figure,
  .m-container-inflatable .m-right-s > .m-console-figure {
    margin-left: 0;
    margin-right: -1rem;
  }

  .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
  .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
    margin-left: -10%;
    margin-right: -10%;
  }
}
@media screen and (min-width: 768px) {
  .m-container-inflatable .m-center-m > .m-note,
  .m-container-inflatable .m-center-m > .m-frame,
  .m-container-inflatable .m-center-m > .m-block,
  .m-container-inflatable .m-center-m > .m-imagegrid,
  .m-container-inflatable .m-center-m > pre,
  .m-container-inflatable .m-center-m > .m-code-figure,
  .m-container-inflatable .m-center-m > .m-console-figure {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .m-container-inflatable .m-left-m > .m-note,
  .m-container-inflatable .m-left-m > .m-frame,
  .m-container-inflatable .m-left-m > .m-block,
  .m-container-inflatable .m-left-m > .m-imagegrid,
  .m-container-inflatable .m-left-m > pre,
  .m-container-inflatable .m-left-m > .m-code-figure,
  .m-container-inflatable .m-left-m > .m-console-figure {
    margin-left: -1rem;
    margin-right: 0;
  }
  .m-container-inflatable .m-right-m > .m-note,
  .m-container-inflatable .m-right-m > .m-frame,
  .m-container-inflatable .m-right-m > .m-block,
  .m-container-inflatable .m-right-m > .m-imagegrid,
  .m-container-inflatable .m-right-m > pre,
  .m-container-inflatable .m-right-m > .m-code-figure,
  .m-container-inflatable .m-right-m > .m-console-figure {
    margin-left: 0;
    margin-right: -1rem;
  }

  .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
  .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
    margin-left: -10%;
    margin-right: -10%;
  }
}
@media screen and (min-width: 992px) {
  .m-container-inflatable .m-center-l > .m-note,
  .m-container-inflatable .m-center-l > .m-frame,
  .m-container-inflatable .m-center-l > .m-block,
  .m-container-inflatable .m-center-l > .m-imagegrid,
  .m-container-inflatable .m-center-l > pre,
  .m-container-inflatable .m-center-l > .m-code-figure,
  .m-container-inflatable .m-center-l > .m-console-figure {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .m-container-inflatable .m-left-l > .m-note,
  .m-container-inflatable .m-left-l > .m-frame,
  .m-container-inflatable .m-left-l > .m-block,
  .m-container-inflatable .m-left-l > .m-imagegrid,
  .m-container-inflatable .m-left-l > pre,
  .m-container-inflatable .m-left-l > .m-code-figure,
  .m-container-inflatable .m-left-l > .m-console-figure {
    margin-left: -1rem;
    margin-right: 0;
  }
  .m-container-inflatable .m-right-l > .m-note,
  .m-container-inflatable .m-right-l > .m-frame,
  .m-container-inflatable .m-right-l > .m-block,
  .m-container-inflatable .m-right-l > .m-imagegrid,
  .m-container-inflatable .m-right-l > pre,
  .m-container-inflatable .m-right-l > .m-code-figure,
  .m-container-inflatable .m-right-l > .m-console-figure {
    margin-left: 0;
    margin-right: -1rem;
  }

  .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
  .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
    margin-left: -10%;
    margin-right: -10%;
  }
}

/* Code block (uses Pygments CSS classes) */
pre.m-code span.hll {
  margin-left: -1.0rem;
  margin-right: -1.0rem;
  padding-left: 1.0rem;
}

/* Inverted code block / inline code */
.m-code.m-inverted > span, .m-console.m-inverted > span {
  opacity: 0.3333;
}
.m-code.m-inverted > span.hll, .m-console.m-inverted > span.hll {
  opacity: 1;
  background-color: transparent; /* TODO: handle this in pygments directly */
  border-color: transparent;
}
.m-code.m-inverted { color: var(--code-inverted-color); }
.m-console.m-inverted { color: var(--console-inverted-color); }
.m-code.m-inverted > span.hll { color: var(--code-color); }
.m-cosole.m-inverted > span.hll { color: var(--console-color); }

/* Code color swatch */
.m-code-color {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  vertical-align: -0.05rem;
  margin-left: 0.2rem;
  margin-right: 0.1rem;
  border-radius: 0.1rem;
}

/* Math block, math figure, inline math, math inside buttons because I am
   crazy */
div.m-math {
  overflow-x: auto;
  overflow-y: hidden; /* Chrome 62 displays a vertical scrollbar otherwise */
}
div.m-math svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
div.m-button a svg.m-math { fill: var(--button-background-color); }
div.m-button.m-flat a svg.m-math { fill: var(--color); }
div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-math,
div.m-button.m-default a:active svg.m-math {
  fill: var(--link-active-color);
}

/* Plots, graphs. Graphs can be either div.m-graph svg or svg.m-graph, so using
   just .m-graph when referencing both a <div> graph and a <figure> graph. */
.m-graph { font-size: var(--font-size); }
div.m-plot svg, div.m-graph svg {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
div.m-plot .m-background { fill: var(--plot-background-color); }
/* Font sizes are hardcoded in m.plots, change there first! */
div.m-plot svg .m-label { font-size: 11px; }
div.m-plot svg .m-title { font-size: 13px; }
div.m-plot svg .m-label, div.m-plot svg .m-title { fill: var(--color); }
div.m-plot svg .m-line {
  stroke: var(--color);
  stroke-width: 0.8;
}
div.m-plot svg .m-error {
  stroke: var(--plot-error-color);
  stroke-width: 1.5;
}
div.m-plot svg .m-label.m-dim { fill: var(--dim-color); }
.m-graph g.m-edge path, .m-graph g.m-cluster polygon,
.m-graph g.m-node.m-flat ellipse,
.m-graph g.m-node.m-flat polygon {
  fill: none;
}
.m-graph g.m-node:not(.m-flat) text {
  fill: var(--button-background-color);
}

/* Rendered math and graphs have no padding around, add it if in a figure,
   ensure it's applied only on the immediately first svg inside. Because we
   want a background under the padding as well, switch the box sizing to
   content box. */
figure.m-figure > svg.m-math:first-child,
figure.m-figure > svg.m-graph:first-child {
  padding: 1rem;
  box-sizing: content-box;
}
figure.m-figure:not(.m-flat) > svg.m-math:first-child,
figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
  background-color: var(--line-color);
}

/* Colored block, header links in a colored block, colored text, flat label */
.m-block.m-default { border-left-color: var(--line-color); }
.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
.m-text.m-default, .m-label.m-flat.m-default {
  color: var(--default-color);
}
.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
  color: var(--link-color);
}
.m-block.m-primary { border-left-color: var(--primary-color); }
.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
.m-text.m-primary, .m-label.m-flat.m-primary {
  color: var(--primary-color);
}
.m-block.m-success { border-left-color: var(--success-color); }
.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
.m-text.m-success, .m-label.m-flat.m-success {
  color: var(--success-color);
}
.m-block.m-warning { border-left-color: var(--warning-color); }
.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
.m-text.m-warning, .m-label.m-flat.m-warning {
  color: var(--warning-color);
}
.m-block.m-danger { border-left-color: var(--danger-color); }
.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
.m-text.m-danger, .m-label.m-flat.m-danger {
  color: var(--danger-color);
}
.m-block.m-info { border-left-color: var(--info-color); }
.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
.m-text.m-info, .m-label.m-flat.m-info {
  color: var(--info-color);
}
.m-block.m-dim { border-left-color: var(--dim-color); }
.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
  color: var(--dim-color);
}
.m-block.m-dim a, .m-text.m-dim a { color: var(--dim-link-color); }
.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active,
.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
  color: var(--dim-link-active-color);
}
.m-block.m-flat { border-color: transparent; }
.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5, .m-block.m-flat h6 {
  color: var(--default-color);
}

/* Active link in a block header (gawd, this is verbose as hell). Dim blocks
   have the link colors already defined above. */
.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active,
.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active,
.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active,
.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active {
  color: var(--default-link-active-color);
}
.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active,
.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active,
.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active,
.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active {
  color: var(--primary-link-active-color);
}
.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active,
.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active,
.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active,
.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active {
  color: var(--success-link-active-color);
}
.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active,
.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active,
.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active,
.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active {
  color: var(--warning-link-active-color);
}
.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active,
.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active,
.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active,
.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active {
  color: var(--danger-link-active-color);
}
.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active,
.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active,
.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active,
.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active {
  color: var(--info-link-active-color);
}

/* Colored button, non-flat label */
div.m-button a, .m-label { color: var(--button-background-color); }
div.m-button.m-flat a { color: var(--color); }
div.m-button.m-flat a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
  color: var(--link-active-color);
}
div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: var(--default-color); }
div.m-button.m-primary a, .m-label:not(.m-flat).m-primary { background-color: var(--primary-color); }
div.m-button.m-success a, .m-label:not(.m-flat).m-success { background-color: var(--success-color); }
div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: var(--warning-color); }
div.m-button.m-danger a, .m-label:not(.m-flat).m-danger { background-color: var(--danger-color); }
div.m-button.m-info a, .m-label:not(.m-flat).m-info { background-color: var(--info-color); }
div.m-button.m-dim a, .m-label:not(.m-flat).m-dim { background-color: var(--dim-color); }
div.m-button.m-default a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
  background-color: var(--default-link-active-color);
}
div.m-button.m-primary a:hover, div.m-button.m-primary a:focus, div.m-button.m-primary a:active {
  background-color: var(--primary-link-active-color);
}
div.m-button.m-success a:hover, div.m-button.m-success a:focus, div.m-button.m-success a:active {
  background-color: var(--success-link-active-color);
}
div.m-button.m-warning a:hover, div.m-button.m-warning a:focus, div.m-button.m-warning a:active {
  background-color: var(--warning-link-active-color);
}
div.m-button.m-danger a:hover, div.m-button.m-danger a:focus, div.m-button.m-danger a:active {
  background-color: var(--danger-link-active-color);
}
div.m-button.m-info a:hover, div.m-button.m-info a:focus, div.m-button.m-info a:active {
  background-color: var(--info-link-active-color);
}
div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:active {
  /* Using a dedicated color here because we want the button dim by default,
     not highlighted as other links */
  background-color: var(--dim-button-active-color);
}

/* Colored note, table coloring */
.m-note.m-default { background-color: var(--default-filled-background-color); }
.m-note.m-default,
table.m-table tr.m-default td, table.m-table td.m-default,
table.m-table tr.m-default th, table.m-table th.m-default {
  /* No background for default table to keep the row hover */
  color: var(--default-filled-color);
}
.m-note.m-default a:hover,
table.m-table tr.m-default td a:hover, table.m-table td.m-default a:hover,
table.m-table tr.m-default th a:hover, table.m-table th.m-default a:hover,
.m-note.m-default a:focus,
table.m-table tr.m-default td a:focus, table.m-table td.m-default a:focus,
table.m-table tr.m-default th a:focus, table.m-table th.m-default a:focus,
.m-note.m-default a:active,
table.m-table tr.m-default td a:active, table.m-table td.m-default a:active,
table.m-table tr.m-default th a:active, table.m-table th.m-default a:active {
  color: var(--default-filled-link-active-color);
}
.m-note.m-primary a,
table.m-table tr.m-primary td a, table.m-table td.m-primary a,
table.m-table tr.m-primary th a, table.m-table th.m-primary a {
  color: var(--default-filled-link-color);
}
.m-note.m-primary,
table.m-table tr.m-primary td, table.m-table td.m-primary,
table.m-table tr.m-primary th, table.m-table th.m-primary {
  background-color: var(--primary-filled-background-color);
  color: var(--primary-filled-color);
}
.m-note.m-primary a,
table.m-table tr.m-primary td a, table.m-table td.m-primary a,
table.m-table tr.m-primary th a, table.m-table th.m-primary a {
  color: var(--primary-filled-link-color);
}
.m-note.m-primary a:hover,
table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover,
table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover,
.m-note.m-primary a:focus,
table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus,
table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus,
.m-note.m-primary a:active,
table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active,
table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active {
  color: var(--primary-filled-link-active-color);
}
.m-note.m-success,
table.m-table tr.m-success td, table.m-table td.m-success,
table.m-table tr.m-success th, table.m-table th.m-success {
  background-color: var(--success-filled-background-color);
  color: var(--success-filled-color);
}
.m-note.m-success a,
table.m-table tr.m-success td a, table.m-table td.m-success a,
table.m-table tr.m-success th a, table.m-table th.m-success a {
  color: var(--success-filled-link-color);
}
.m-note.m-success a:hover,
table.m-table tr.m-success td a:hover, table.m-table td.m-success a:hover,
table.m-table tr.m-success th a:hover, table.m-table th.m-success a:hover,
.m-note.m-success a:focus,
table.m-table tr.m-success td a:focus, table.m-table td.m-success a:focus,
table.m-table tr.m-success th a:focus, table.m-table th.m-success a:focus,
.m-note.m-success a:active,
table.m-table tr.m-success td a:active, table.m-table td.m-success a:active,
table.m-table tr.m-success th a:active, table.m-table th.m-success a:active {
  color: var(--success-filled-link-active-color);
}
.m-note.m-warning, table.m-table tr.m-warning td, table.m-table td.m-warning,
                   table.m-table tr.m-warning th, table.m-table th.m-warning {
  background-color: var(--warning-filled-background-color);
  color: var(--warning-filled-color);
}
.m-note.m-warning a, table.m-table tr.m-warning td a, table.m-table td.m-warning a,
                     table.m-table tr.m-warning th a, table.m-table th.m-warning a {
  color: var(--warning-filled-link-color);
}
.m-note.m-warning a:hover,
table.m-table tr.m-warning td a:hover, table.m-table td.m-warning a:hover,
table.m-table tr.m-warning th a:hover, table.m-table th.m-warning a:hover,
.m-note.m-warning a:focus,
table.m-table tr.m-warning td a:focus, table.m-table td.m-warning a:focus,
table.m-table tr.m-warning th a:focus, table.m-table th.m-warning a:focus,
.m-note.m-warning a:active,
table.m-table tr.m-warning td a:active, table.m-table td.m-warning a:active,
table.m-table tr.m-warning th a:active, table.m-table th.m-warning a:active {
  color: var(--warning-filled-link-active-color);
}
.m-note.m-danger,
table.m-table tr.m-danger td, table.m-table td.m-danger,
table.m-table tr.m-danger th, table.m-table th.m-danger {
  background-color: var(--danger-filled-background-color);
  color: var(--danger-filled-color);
}
.m-note.m-danger a,
table.m-table tr.m-danger td a, table.m-table td.m-danger a,
table.m-table tr.m-danger th a, table.m-table th.m-danger a {
  color: var(--danger-filled-link-color);
}
.m-note.m-danger a:hover,
table.m-table tr.m-danger td a:hover, table.m-table td.m-danger a:hover,
table.m-table tr.m-danger th a:hover, table.m-table th.m-danger a:hover,
.m-note.m-danger a:focus,
table.m-table tr.m-danger td a:focus, table.m-table td.m-danger a:focus,
table.m-table tr.m-danger th a:focus, table.m-table th.m-danger a:focus,
.m-note.m-danger a:active,
table.m-table tr.m-danger td a:active, table.m-table td.m-danger a:active,
table.m-table tr.m-danger th a:active, table.m-table th.m-danger a:active {
  color: var(--danger-filled-link-active-color);
}
.m-note.m-info,
table.m-table tr.m-info td, table.m-table td.m-info,
table.m-table tr.m-info th, table.m-table th.m-info {
  background-color: var(--info-filled-background-color);
  color: var(--info-filled-color);
}
.m-note.m-info a,
table.m-table tr.m-info td a, table.m-table td.m-info a,
table.m-table tr.m-info th a, table.m-table th.m-info a {
  color: var(--info-filled-link-color);
}
.m-note.m-info a:hover,
table.m-table tr.m-info td a:hover, table.m-table td.m-info a:hover,
table.m-table tr.m-info th a:hover, table.m-table th.m-info a:hover,
.m-note.m-info a:focus,
table.m-table tr.m-info td a:focus, table.m-table td.m-info a:focus,
table.m-table tr.m-info th a:focus, table.m-table th.m-info a:focus,
.m-note.m-info a:active,
table.m-table tr.m-info td a:active, table.m-table td.m-info a:active,
table.m-table tr.m-info th a:active, table.m-table th.m-info a:active {
  color: var(--info-filled-link-active-color);
}
.m-note.m-dim,
table.m-table tr.m-dim td, table.m-table td.m-dim,
table.m-table tr.m-dim th, table.m-table th.m-dim {
  background-color: var(--dim-filled-background-color);
  color: var(--dim-filled-color);
}
.m-note.m-dim a,
table.m-table tr.m-dim td a, table.m-table td.m-dim a,
table.m-table tr.m-dim th a, table.m-table th.m-dim a {
  color: var(--dim-filled-link-color);
}
.m-note.m-dim a:hover,
table.m-table tr.m-dim td a:hover, table.m-table td.m-dim a:hover,
table.m-table tr.m-dim th a:hover, table.m-table th.m-dim a:hover,
.m-note.m-dim a:focus,
table.m-table tr.m-dim td a:focus, table.m-table td.m-dim a:focus,
table.m-table tr.m-dim th a:focus, table.m-table th.m-dim a:focus,
.m-note.m-dim a:active,
table.m-table tr.m-dim td a:active, table.m-table td.m-dim a:active,
table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active {
  color: var(--dim-filled-link-active-color);
}

/* Colored figure */
figure.m-figure.m-default::before { border-color: var(--default-filled-background-color); }
figure.m-figure.m-default figcaption { color: var(--default-color); }
figure.m-figure.m-primary::before { border-color: var(--primary-filled-background-color); }
figure.m-figure.m-primary figcaption { color: var(--primary-color); }
figure.m-figure.m-primary figcaption .m-figure-description { color: var(--default-color); }
figure.m-figure.m-success::before { border-color: var(--success-filled-background-color); }
figure.m-figure.m-success figcaption { color: var(--success-color); }
figure.m-figure.m-success figcaption .m-figure-description { color: var(--default-color); }
figure.m-figure.m-warning::before { border-color: var(--warning-filled-background-color); }
figure.m-figure.m-warning figcaption { color: var(--warning-color); }
figure.m-figure.m-warning figcaption .m-figure-description { color: var(--default-color); }
figure.m-figure.m-danger::before { border-color: var(--danger-filled-background-color); }
figure.m-figure.m-danger figcaption { color: var(--danger-color); }
figure.m-figure.m-danger figcaption .m-figure-description { color: var(--default-color); }
figure.m-figure.m-info::before { border-color: var(--info-filled-background-color); }
figure.m-figure.m-info figcaption { color: var(--info-color); }
figure.m-figure.m-info figcaption .m-figure-description { color: var(--default-color); }
figure.m-figure.m-dim::before { border-color: var(--dim-filled-background-color); }
figure.m-figure.m-dim { color: var(--dim-color); }
figure.m-figure.m-dim a { color: var(--dim-link-color); }
figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
  color: var(--dim-link-active-color);
}

/* Colored math block, inline math, colored math parts, plots and
   global-colored graphs. Should be before local graph coloring, so the latter
   can override this. Applies to either div.m-math svg or svg.m.math
   (div.m-graph svg or svg.m-graph), so using just .m-math (.m-graph). Besides
   that, using svg anywhere would make it a higher priority, breaking the
   colors.

   When modifying, use these test pages for a visual check & expand as needed:
    https://mcss.mosra.cz/plugins/math-and-code/test/
    https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */
.m-math { fill: var(--color); }
.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
div.m-plot svg .m-bar.m-default,
.m-graph g.m-edge polygon,
.m-graph g.m-node:not(.m-flat) ellipse,
.m-graph g.m-node:not(.m-flat) polygon,
.m-graph g.m-edge text,
.m-graph g.m-node.m-flat text,
.m-graph g.m-cluster text,
.m-graph.m-default g.m-edge polygon,
.m-graph.m-default g.m-node:not(.m-flat) ellipse,
.m-graph.m-default g.m-node:not(.m-flat) polygon,
.m-graph.m-default g.m-edge text,
.m-graph.m-default g.m-node.m-flat text,
.m-graph.m-default g.m-cluster text {
  fill: var(--default-color);
}
.m-graph g.m-edge polygon,
.m-graph g.m-edge path,
.m-graph g.m-node ellipse,
.m-graph g.m-node polygon,
.m-graph g.m-node polyline,
.m-graph g.m-cluster polygon,
.m-graph.m-default g.m-edge polygon,
.m-graph.m-default g.m-edge path,
.m-graph.m-default g.m-node ellipse,
.m-graph.m-default g.m-node polygon,
.m-graph.m-default g.m-node polyline,
.m-graph.m-default g.m-cluster polygon {
  stroke: var(--default-color);
}
.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
div.m-plot svg .m-bar.m-primary,
.m-graph.m-primary g.m-edge polygon,
.m-graph.m-primary g.m-node:not(.m-flat) ellipse,
.m-graph.m-primary g.m-node:not(.m-flat) polygon,
.m-graph.m-primary g.m-edge text,
.m-graph.m-primary g.m-node.m-flat text,
.m-graph.m-primary g.m-cluster text {
  fill: var(--primary-color);
}
.m-graph.m-primary g.m-edge polygon,
.m-graph.m-primary g.m-edge path,
.m-graph.m-primary g.m-node ellipse,
.m-graph.m-primary g.m-node polygon,
.m-graph.m-primary g.m-node polyline,
.m-graph.m-primary g.m-cluster polygon {
  stroke: var(--primary-color);
}
.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
div.m-plot svg .m-bar.m-success,
.m-graph.m-success g.m-edge polygon,
.m-graph.m-success g.m-node:not(.m-flat) ellipse,
.m-graph.m-success g.m-node:not(.m-flat) polygon,
.m-graph.m-success g.m-edge text,
.m-graph.m-success g.m-node.m-flat text,
.m-graph.m-success g.m-cluster text {
  fill: var(--success-color);
}
.m-graph.m-success g.m-edge polygon,
.m-graph.m-success g.m-edge path,
.m-graph.m-success g.m-node ellipse,
.m-graph.m-success g.m-node polygon,
.m-graph.m-success g.m-node polyline,
.m-graph.m-success g.m-cluster polygon {
  stroke: var(--success-color);
}
.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
div.m-plot svg .m-bar.m-warning,
.m-graph.m-warning g.m-edge polygon,
.m-graph.m-warning g.m-node:not(.m-flat) ellipse,
.m-graph.m-warning g.m-node:not(.m-flat) polygon,
.m-graph.m-warning g.m-edge text,
.m-graph.m-warning g.m-node.m-flat text,
.m-graph.m-warning g.m-cluster text {
  fill: var(--warning-color);
}
.m-graph.m-warning g.m-edge polygon,
.m-graph.m-warning g.m-edge path,
.m-graph.m-warning g.m-node ellipse,
.m-graph.m-warning g.m-node polygon,
.m-graph.m-warning g.m-node polyline,
.m-graph.m-warning g.m-cluster polygon {
  stroke: var(--warning-color);
}
.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
div.m-plot svg .m-bar.m-danger,
.m-graph.m-danger g.m-edge polygon,
.m-graph.m-danger g.m-node:not(.m-flat) ellipse,
.m-graph.m-danger g.m-node:not(.m-flat) polygon,
.m-graph.m-danger g.m-edge text,
.m-graph.m-danger g.m-node.m-flat text,
.m-graph.m-danger g.m-cluster text {
  fill: var(--danger-color);
}
.m-graph.m-danger g.m-edge polygon,
.m-graph.m-danger g.m-edge path,
.m-graph.m-danger g.m-node ellipse,
.m-graph.m-danger g.m-node polygon,
.m-graph.m-danger g.m-node polyline,
.m-graph.m-danger g.m-cluster polygon {
  stroke: var(--danger-color);
}
.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
div.m-plot svg .m-bar.m-info,
.m-graph.m-info g.m-edge polygon,
.m-graph.m-info g.m-node:not(.m-flat) ellipse,
.m-graph.m-info g.m-node:not(.m-flat) polygon,
.m-graph.m-info g.m-edge text,
.m-graph.m-info g.m-node.m-flat text,
.m-graph.m-info g.m-cluster text {
  fill: var(--info-color);
}
.m-graph.m-info g.m-edge polygon,
.m-graph.m-info g.m-edge path,
.m-graph.m-info g.m-node ellipse,
.m-graph.m-info g.m-node polygon,
.m-graph.m-info g.m-node polyline,
.m-graph.m-info g.m-cluster polygon {
  stroke: var(--info-color);
}
.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
div.m-plot svg .m-bar.m-dim,
.m-graph.m-dim g.m-edge polygon,
.m-graph.m-dim g.m-node:not(.m-flat) ellipse,
.m-graph.m-dim g.m-node:not(.m-flat) polygon,
.m-graph.m-dim g.m-edge text,
.m-graph.m-dim g.m-node.m-flat text,
.m-graph.m-dim g.m-cluster text {
  fill: var(--dim-color);
}
.m-graph.m-dim g.m-edge polygon,
.m-graph.m-dim g.m-edge path,
.m-graph.m-dim g.m-node ellipse,
.m-graph.m-dim g.m-node polygon,
.m-graph.m-dim g.m-node polyline,
.m-graph.m-dim g.m-cluster polygon {
  stroke: var(--dim-color);
}

/* Local-colored graphs. Later so it overrides global coloring. Applies to
   either div.m-graph svg or svg.m-graph, so using just .m-graph. This is not
   needed for math, for some reason the overrides work correctly.

   When modifying, use these test pages for a visual check & expand as needed:
    https://mcss.mosra.cz/plugins/math-and-code/test/
    https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */
.m-graph g.m-edge.m-default polygon,
.m-graph g.m-node.m-default:not(.m-flat) ellipse,
.m-graph g.m-node.m-default:not(.m-flat) polygon,
.m-graph g.m-edge.m-default text,
.m-graph g.m-node.m-default.m-flat text,
.m-graph g.m-cluster.m-default text {
  fill: var(--default-color);
}
.m-graph g.m-edge.m-default polygon,
.m-graph g.m-edge.m-default path,
.m-graph g.m-node.m-default ellipse,
.m-graph g.m-node.m-default polygon,
.m-graph g.m-node.m-default polyline,
.m-graph g.m-cluster.m-default polygon {
  stroke: var(--default-color);
}
.m-graph g.m-edge.m-primary polygon,
.m-graph g.m-node.m-primary:not(.m-flat) ellipse,
.m-graph g.m-node.m-primary:not(.m-flat) polygon,
.m-graph g.m-edge.m-primary text,
.m-graph g.m-node.m-primary.m-flat text,
.m-graph g.m-cluster.m-primary text {
  fill: var(--primary-color);
}
.m-graph g.m-edge.m-primary polygon,
.m-graph g.m-edge.m-primary path,
.m-graph g.m-node.m-primary ellipse,
.m-graph g.m-node.m-primary polygon,
.m-graph g.m-node.m-primary polyline,
.m-graph g.m-cluster.m-primary polygon {
  stroke: var(--primary-color);
}
.m-graph g.m-edge.m-success polygon,
.m-graph g.m-node.m-success:not(.m-flat) ellipse,
.m-graph g.m-node.m-success:not(.m-flat) polygon,
.m-graph g.m-edge.m-success text,
.m-graph g.m-node.m-success.m-flat text,
.m-graph g.m-cluster.m-success text {
  fill: var(--success-color);
}
.m-graph g.m-edge.m-success polygon,
.m-graph g.m-edge.m-success path,
.m-graph g.m-node.m-success ellipse,
.m-graph g.m-node.m-success polygon,
.m-graph g.m-node.m-success polyline,
.m-graph g.m-cluster.m-success polygon {
  stroke: var(--success-color);
}
.m-graph g.m-edge.m-warning polygon,
.m-graph g.m-node.m-warning:not(.m-flat) ellipse,
.m-graph g.m-node.m-warning:not(.m-flat) polygon,
.m-graph g.m-edge.m-warning text,
.m-graph g.m-node.m-warning.m-flat text,
.m-graph g.m-cluster.m-warning text {
  fill: var(--warning-color);
}
.m-graph g.m-edge.m-warning polygon,
.m-graph g.m-edge.m-warning path,
.m-graph g.m-node.m-warning ellipse,
.m-graph g.m-node.m-warning polygon,
.m-graph g.m-node.m-warning polyline,
.m-graph g.m-cluster.m-warning polygon {
  stroke: var(--warning-color);
}
.m-graph g.m-edge.m-danger polygon,
.m-graph g.m-node.m-danger:not(.m-flat) ellipse,
.m-graph g.m-node.m-danger:not(.m-flat) polygon,
.m-graph g.m-edge.m-danger text,
.m-graph g.m-node.m-danger.m-flat text,
.m-graph g.m-cluster.m-danger text {
  fill: var(--danger-color);
}
.m-graph g.m-edge.m-danger polygon,
.m-graph g.m-edge.m-danger path,
.m-graph g.m-node.m-danger ellipse,
.m-graph g.m-node.m-danger polygon,
.m-graph g.m-node.m-danger polyline,
.m-graph g.m-cluster.m-danger polygon {
  stroke: var(--danger-color);
}
.m-graph g.m-edge.m-info polygon,
.m-graph g.m-node.m-info:not(.m-flat) ellipse,
.m-graph g.m-node.m-info:not(.m-flat) polygon,
.m-graph g.m-edge.m-info text,
.m-graph g.m-node.m-info.m-flat text,
.m-graph g.m-cluster.m-info text {
  fill: var(--info-color);
}
.m-graph g.m-edge.m-info polygon,
.m-graph g.m-edge.m-info path,
.m-graph g.m-node.m-info ellipse,
.m-graph g.m-node.m-info polygon,
.m-graph g.m-node.m-info polyline,
.m-graph g.m-cluster.m-info polygon {
  stroke: var(--info-color);
}
.m-graph g.m-edge.m-dim polygon,
.m-graph g.m-node.m-dim:not(.m-flat) ellipse,
.m-graph g.m-node.m-dim:not(.m-flat) polygon,
.m-graph g.m-edge.m-dim text,
.m-graph g.m-node.m-dim.m-flat text,
.m-graph g.m-cluster.m-dim text {
  fill: var(--dim-color);
}
.m-graph g.m-edge.m-dim polygon,
.m-graph g.m-edge.m-dim path,
.m-graph g.m-node.m-dim ellipse,
.m-graph g.m-node.m-dim polygon,
.m-graph g.m-node.m-dim polyline,
.m-graph g.m-cluster.m-dim polygon {
  stroke: var(--dim-color);
}

/* Spacing after every block element, but not after the last and not when
   m-nopadb is specified. It's div.m-math and div.m-graph instead of .m-math and
   .m-graph because math / graph figures are handled already with
   figure.m-figure. */
p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
.m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image,
img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math,
div.m-graph, div.m-plot {
  margin-bottom: 1rem;
}
p:last-child, p.m-nopadb, ul:last-child, ul.m-nopadb,
ol:last-child, ol.m-nopadb, dl:last-child, dl.m-nopadb,
blockquote:last-child, blockquote.m-nopadb, pre:last-child, pre.m-nopadb,
.m-code-figure:last-child, .m-code-figure.m-nopadb,
.m-console-figure:last-child, .m-console-figure.m-nopadb,
hr:last-child, hr.m-nopadb, .m-note:last-child, .m-note.m-nopadb,
.m-frame:last-child, .m-frame.m-nopadb, .m-block:last-child, .m-block.m-nopadb,
div.m-button:last-child, div.m-button.m-nopadb,
div.m-scroll:last-child, div.m-scroll.m-nopadb,
table.m-table:last-child, table.m-table.m-nopadb,
img.m-image:last-child, img.m-image.m-nopadb,
svg.m-image:last-child, svg.m-image.m-nopadb,
div.m-image:last-child, div.m-image.m-nopadb,
figure.m-figure:last-child, figure.m-figure.m-nopadb,
.m-imagegrid:last-child, .m-imagegrid.m-nopadb,
div.m-math:last-child, div.m-math.m-nopadb,
div.m-graph:last-child, div.m-graph.m-nopadb,
div.m-plot:last-child, div.m-plot.m-nopadb {
  margin-bottom: 0;
}

/* List items usually have just inline elements and are kept compact. If (sane)
   block elements are inside list items, they have spacing even as last, but
   not if the list item is the last. Also not if m-nopadb is specified. */
li > p:last-child, li > blockquote:last-child, li > pre:last-child,
li > .m-code-figure:last-child, li > .m-console-figure:last-child,
li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child,
li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child,
li > figure.m-figure:last-child, li > div.m-math:last-child,
li > div.m-graph:last-child, li > div.m-plot:last-child {
  margin-bottom: 1rem;
}
li:last-child > p:last-child, li:last-child > p.m-nopadb,
li:last-child > blockquote:last-child, li:last-child > blockquote.m-nopadb,
li:last-child > pre:last-child, li:last-child > pre.m-nopadb,
li:last-child > .m-code-figure:last-child, li:last-child > .m-code-figure.m-nopadb,
li:last-child > .m-console-figure:last-child, li:last-child > .m-console-figure.m-nopadb,
li:last-child > .m-note:last-child, li:last-child > .m-note.m-nopadb,
li:last-child > .m-frame:last-child, li:last-child > .m-frame.m-nopadb,
li:last-child > .m-block:last-child, li:last-child > .m-block.m-nopadb,
li:last-child > div.m-button:last-child, li:last-child > div.m-button.m-nopadb,
li:last-child > div.m-scroll:last-child, li:last-child > div.m-scroll.m-nopadb,
li:last-child > table.m-table:last-child, li:last-child > table.m-table.m-nopadb,
li:last-child > img.m-image:last-child, li:last-child > img.m-image.m-nopadb,
li:last-child > svg.m-image:last-child, li:last-child > svg.m-image.m-nopadb,
li:last-child > div.m-image:last-child, li:last-child > div.m-image.m-nopadb,
li:last-child > figure.m-figure:last-child, li:last-child > figure.m-figure.m-nopadb,
li:last-child > div.m-math:last-child, li:last-child > div.m-math.m-nopadb,
li:last-child > div.m-graph:last-child, li:last-child > div.m-graph.m-nopadb,
li:last-child > div.m-plot:last-child, li:last-child > div.m-plot.m-nopadb {
  margin-bottom: 0;
}