/*
    This file is part of m.css.

    Copyright © 2017, 2018, 2019, 2020 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-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}
h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.5em;
  color: var(--cs-primary-base)
}
h3 {
  margin-top: 1rem;
  color: var(--cs-primary-darker)
}
h3, h4 {
  font-size: 1.17rem;
}
h3, h4, h5, h6, p {
  margin-bottom: 0.5rem;
}
h5, h6 {
  font-size: 1rem;
}
h4, h5 {
  font-style: italic;
}
p, ul, ol, dl {
  margin-top: 0;
}
ul, ol {
  padding-left: 2rem;
}
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 {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  border-left-style: solid;
  border-left-width: 0.25rem;
  border-color: var(--line-color);
  overflow-x: auto;
  margin-top: 0; /* stupid defaults */
}
code {
  padding: 0.125rem;
}
a > code {
   color: inherit;
}

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

/* Utility */
.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%; }
.m-smaller-font{ font-size: 75%; }
/*
h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
  font-weight: normal;
  color: var(--muted-color)
}
*/

/* 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(--cs-primary-lighter);
  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;
}

/* Label */
.m-label {
  border-radius: var(--border-radius);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--dim-filled-color);
  font-size: 75%;
  font-weight: normal;
  padding: 0.0625rem 0.1875rem;
  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;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
table.m-table.m-big {
  margin-top: 1.75rem;
}
table.m-table th, table.m-table td {
  vertical-align: baseline;
  border-style: solid;
  border-width: 0;
  border-color: var(--line-color);
  padding: 0.1rem 0.6rem;
}
.m-grid table.m-table tr:nth-child(even) {
   background-color: var(--dim-filled-background-color);
}
.m-spaced table.m-table td { /* We can put a table inside a div with class="m-spaced" to make more space between rows */
  padding-bottom: 0.5rem;
}
table.m-first-tight td:first-child {
  width: 1%;
  white-space: nowrap;
}
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;
  padding-top: 0.5rem;
}
table.m-table thead th, table.m-table thead td {
  border-bottom-width: 0.125rem;
  padding-bottom: 0.5rem;
  vertical-align: bottom;
}
table.m-table tfoot th, table.m-table tfoot td {
  border-top-width: 0.125rem;
  padding-top: 0.5rem;
}
table.m-table tbody tr:first-child th, table.m-table tbody tr:first-child td {
  border-top-width: 0.125rem;
  padding-top: 0.5rem;
}
table.m-table tbody tr:last-child th, table.m-table tbody tr:last-child td {
  border-bottom-width: 0.125rem;
  padding-bottom: 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-background-color);
  color: var(--code-color);
}

/* Image. Ensure everything is done for both <img> and <svg>. */
img.m-image, svg.m-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
div.m-image {
  text-align: center;
}
img.m-image, svg.m-image, div.m-image img, div.m-image svg {
  max-width: 100%;
  border-radius: var(--border-radius);
}
div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
  width: 100%;
}

/* 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-'] > pre,
.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 > pre,
.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-'] > pre,
.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-'] > pre,
.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-'] > pre,
.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 > pre {
  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 > pre {
    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 > pre {
    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 > pre {
    margin-left: 0;
    margin-right: -1rem;
  }

}
@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 > pre {
    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 > pre {
    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 > pre {
    margin-left: 0;
    margin-right: -1rem;
  }
}
@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 > pre {
    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 > pre {
    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 > pre {
    margin-left: 0;
    margin-right: -1rem;
  }
}

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

/* 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 */
div.m-math svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  overflow: visible;
}
.m-math svg {
  overflow: visible;
}

/* 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 {
  color: var(--default-color);
  border-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 {
  color: var(--primary-color);
  border-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 {
  color: var(--success-color);
  border-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 {
  color: var(--warning-color);
  border-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 {
  color: var(--danger-color);
  border-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 {
  color: var(--info-color);
  border-color: var(--info-color);
}
.m-block.m-dim { border-left-color: var(--dim-color); }
.m-block.m-dim, .m-text.m-dim {
  color: var(--dim-color);
  border-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 labels */
.m-label {
  color: var(--button-background-color);
  border-color: var(--button-background-color);
}
.m-label:not(.m-flat).m-default {
   background-color: var(--default-color);
}
.m-label:not(.m-flat).m-primary {
   background-color: var(--primary-color);
}
.m-label:not(.m-flat).m-success {
   background-color: var(--success-color);
}
.m-label:not(.m-flat).m-warning {
   background-color: var(--warning-color);
}
.m-label:not(.m-flat).m-danger {
   background-color: var(--danger-color);
}
.m-label:not(.m-flat).m-info {
   background-color: var(--info-color);
}
.m-label:not(.m-flat).m-dim {
   background-color: var(--dim-color);
}
.m-label.m-flat.m-default {
   color: var(--default-color);
   border-color: var(--default-color);
}
.m-label.m-flat.m-primary {
   color: var(--primary-color);
   border-color: var(--primary-color);
}
.m-label.m-flat.m-success {
   color: var(--success-color);
   border-color: var(--success-color);
}
.m-label.m-flat.m-warning {
   color: var(--cs-black);
   border-color: var(--warning-color);
}
.m-label.m-flat.m-danger {
   color: var(--danger-color);
   border-color: var(--danger-color);
}
.m-label.m-flat.m-info {
   color: var(--info-color);
   border-color: var(--info-color);
}
.m-label.m-flat.m-dim {
   color: var(--dim-color);
   border-color: var(--dim-color);
}

/* Colored note, table coloring */
.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 {
  background-color: var(--default-filled-background-color);
  color: var(--default-filled-color);
}
.m-note.m-default pre, .m-note.m-default 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 {
  background-color: var(--default-filled-code-background-color);
  color: var(--default-filled-code-color);
}
.m-note.m-default a, .m-note.m-default a pre, .m-note.m-default a code,
table.m-table tr.m-default td a, table.m-table td.m-default a,
table.m-table tr.m-default th a, table.m-table th.m-default a {
  color: var(--default-filled-link-color);
}
.m-note.m-default a:hover, .m-note.m-default a:hover pre, .m-note.m-default a:hover code,
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, .m-note.m-default a:focus pre, .m-note.m-default a:focus code,
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, .m-note.m-default a:active pre, .m-note.m-default a:active code,
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,
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 pre, .m-note.m-primary 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 {
  background-color: var(--primary-filled-code-background-color);
  color: var(--primary-filled-code-color);
}
.m-note.m-primary a, .m-note.m-primary a pre, .m-note.m-primary a code,
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, .m-note.m-primary a:hover pre, .m-note.m-primary a:hover code,
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, .m-note.m-primary a:focus pre, .m-note.m-primary a:focus code,
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, .m-note.m-primary a:active pre, .m-note.m-primary a:active code,
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 pre, .m-note.m-success 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 {
  background-color: var(--success-filled-code-background-color);
  color: var(--success-filled-code-color);
}
.m-note.m-success a, .m-note.m-success a pre, .m-note.m-success a code,
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, .m-note.m-success a:hover pre, .m-note.m-success a:hover code,
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, .m-note.m-success a:focus pre, .m-note.m-success a:focus code,
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, .m-note.m-success a:active pre, .m-note.m-success a:active code,
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 pre, .m-note.m-warning 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 {
  background-color: var(--warning-filled-code-background-color);
  color: var(--warning-filled-code-color);
}
.m-note.m-warning a, .m-note.m-warning a pre, .m-note.m-warning a code,
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, .m-note.m-warning a:hover pre, .m-note.m-warning a:hover code,
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, .m-note.m-warning a:focus pre, .m-note.m-warning a:focus code,
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, .m-note.m-warning a:active pre, .m-note.m-warning a:active code,
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 pre, .m-note.m-danger 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 {
  background-color: var(--danger-filled-code-background-color);
  color: var(--danger-filled-code-color);
}
.m-note.m-danger a, .m-note.m-danger a pre, .m-note.m-danger a code,
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, .m-note.m-danger a:hover pre, .m-note.m-danger a:hover code,
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, .m-note.m-danger a:focus pre, .m-note.m-danger a:focus code,
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, .m-note.m-danger a:active pre, .m-note.m-danger a:active code,
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 pre, .m-note.m-info 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 {
  background-color: var(--info-filled-code-background-color);
  color: var(--info-filled-code-color);
}
.m-note.m-info a, .m-note.m-info a pre, .m-note.m-info a code,
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, .m-note.m-info a:hover pre, .m-note.m-info a:hover code,
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, .m-note.m-info a:focus pre, .m-note.m-info a:focus code,
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, .m-note.m-info a:active pre, .m-note.m-info a:active code,
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 pre, .m-note.m-dim 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(--dim-filled-code-background-color);
  color: var(--dim-filled-code-color);
}
.m-note.m-dim a, .m-note.m-dim a pre, .m-note.m-dim a code,
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, .m-note.m-dim a:hover pre, .m-note.m-dim a:hover code,
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, .m-note.m-dim a:focus pre, .m-note.m-dim a:focus code,
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, .m-note.m-dim a:active pre, .m-note.m-dim a:active code,
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 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,
   so using just .m-math. Besides that, using svg anywhere would make it
   a higher priority, breaking the colors. */
.m-math { fill: var(--color); }
.m-math.m-default, .m-math g.m-default, .m-math rect.m-default {
  fill: var(--default-color);
}
.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary {
  fill: var(--primary-color);
}
.m-math.m-success, .m-math g.m-success, .m-math rect.m-success {
  fill: var(--success-color);
}
.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning {
  fill: var(--warning-color);
}
.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger {
  fill: var(--danger-color);
}
.m-math.m-info, .m-math g.m-info, .m-math rect.m-info {
  fill: var(--info-color);
}
.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim {
  fill: var(--dim-color);
}

/* Spacing after every block element, but not after the last. */
p, ul, ol, dl, blockquote, pre, hr, .m-note,
.m-frame, .m-block, table.m-table, div.m-image,
img.m-image, svg.m-image, div.m-math, div.m-code {
  margin-bottom: 1rem;
}

/* 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. */
li > p:last-child, li > ul:last-child, li > ol:last-child,
li > dl:last-child, li > blockquote:last-child, li > pre:last-child,
li > .m-note:last-child, li > .m-frame:last-child, li > .m-block: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 > div.m-math:last-child, li > div.m-code:last-child {
  margin-bottom: 1rem;
}
