:root>* {
    --md-primary-fg-color:        #1963ad;
    --md-primary-fg-color--light: #4c94db;
    --md-primary-fg-color--dark:  #12477c;
    --md-accent-fg-color:         #4c94db;
}

/*
By default, the Material theme only defines:

.md-typeset img[align]:only-child {
    margin-top: 0;
}

But we want the paragraph beside an image to be always top-aligned
*/
.clear {
    clear: both;
}

img.icon {
    width: 1.3em;
    height: 1.3em;
    object-fit: contain;
    object-position: center;
    vertical-align: middle;
}
img.icon-medium {
    width:1.8rem;
    height:1.8rem;
}
img.introduction-cover {
    width: 100%;
    height: auto;
}
img.width-medium {
    width:22rem;
}

/* To fit more grid columns in a single row. Default is `min(100%, 16rem)` */
.md-typeset .grid.dense {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,1rem),1fr));
}

.md-typeset img[align] {
    margin-top: 0;
}

/* To properly center images in figure even when the caption is wider than the image */
.md-typeset figure img {
    display: block;
    margin: 0 auto;
}

/* To place admonitions below <img align="left"> so that they are always full-width */
/* .md-typeset .admonition {
    clear: both;
} */


/* To place headers below <img align="left"> so that they are always full-width */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    clear: both;
}

/* .md-banner--warning is used for a warning about an outdated version of the documentation. */
.md-banner:not(.md-banner--warning) .md-banner__inner {
    margin: 0 auto; /* To make the announcement banner at the top smaller */
}
.md-banner:not(.md-banner--warning) .md-banner__inner a {
    color: var(--md-primary-bg-color);
}
.md-banner:not(.md-banner--warning) .md-banner__inner a:hover {
    color: var(--md-accent-fg-color);
}
.md-banner:not(.md-banner--warning) .md-banner__inner .md-icon {
    width:0.8em;
    vertical-align: middle;
    display: inline-flex;
}

.md-typeset .no-bullets ul {
    list-style-type: none;
}
.md-typeset .no-bullets ul li {
    margin-left: 0;
}

.badge {
    vertical-align: text-bottom;
    width: auto;
    height: 1.3em;
}
h1 .badge,
h2 .badge,
h3 .badge,
h4 .badge {
    vertical-align: middle;
    width: auto;
    height: 0.85em;
}

.md-typeset .multifigure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.md-typeset figure > p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    counter-reset: image-counter;
    margin: 0;
}

.md-typeset figure img {
    display: block;
    text-align: center;
    padding: 0.25rem;
}
.md-typeset figure figcaption {
    margin: 0 auto;
}


.md-typeset figure span,
.md-typeset .multifigure span {
    display: block;
    text-align: center;
    padding: 0.25rem;
}

.md-typeset figure.sub-counter-lowercase span::after {
    counter-increment: image-counter;
    content: "(" counter(image-counter, lower-alpha) ")";
    display: block;
}

/* Headings color */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6
{
    color: var(--md-primary-fg-color);
    /* color: var(--md-accent-fg-color); */
    /* color: var(--md-default-fg-color); */
}