a {
    color: #11557C;
    text-decoration: none;
}

a:hover {
    color:  #CA7900;
}

table.highlighttable {
    margin-left: 0.5em;
}

table.highlighttable td {
    padding: 0 0.5em 0 0.5em;
}

.simple li>p {
    margin: 0;
}

div.responsive_screenshots {
    /* Horizontally centered */
    display: block;
    margin: auto;

    /* Do not go beyond 1:1 scale (and ensure a 1x4 tight layout) */
    max-width: 640px;  /* at most 4 x 1:1 subfig width  */
    max-height: 120px; /* at most 1 x 1:1 subfig height */
}

/* To avoid subfigure parts outside of the responsive_screenshots  */
/* element (see <https://stackoverflow.com/q/2062258/>)            */
span.clear_screenshots { clear: left; display: block; }

div.responsive_subfig{
    float: left;
    width: 25%;  /* we want 4 subfigs in a row */

    /* Include content, padding and border in width. This should */
    /* avoid having to use tricks like "width: 24.9999%"         */
    box-sizing: border-box;
}

div.responsive_subfig img {
    /* Horizontally centered */
    display: block;
    margin: auto;

    /* Possible downscaling */
    max-width: 162px;  /* at most 1 x 1:1 subfig width  */
    max-height: 139px; /* at most 1 x 1:1 subfig height */

    width: 100%;
}

@media only screen and (max-width: 930px){
    /* The value of 1000px was handcrafted to provide a more or less */
    /* smooth transition between the 1x4 and the 2x2 layouts. It is  */
    /* NB: it is slightly below 1024px: so one should still have a   */
    /* row in a 1024x768 window                                      */

    div.responsive_screenshots {
        /* Do not go beyond 1:1 scale (and ensure a 2x2 tight layout) */
        max-width: 324px;  /* at most 2 x 1:1 subfig width  */
        max-height: 278px; /* at most 2 x 1:1 subfig height */
    }

    div.responsive_subfig {
        width: 50%;  /* we want 2 subfigs in a row */
    }
}

/* bullet boxes on main page */
div.bullet-box-container {
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
}

div.bullet-box {
    flex-grow: 1;
    width: 28%;
    margin: 0.4em;
    padding: 0 1em;
    background: #eff9ff;
}

div.bullet-box p:first-of-type {
    font-size: 1.4em;
    text-align: center;
}

div.bullet-box ul {
    padding-left: 1.2em;
}

div.bullet-box li {
    padding-left: 0.3em;
    margin-bottom: 0.3em;
}

@media only screen and (max-width: 930px){
    div.bullet-box {
        flex: 0 0 90%;
    }
}

/* community items on main page */
div.box {
    display: flex;
    flex-flow: row wrap;
}

div.box-item {
    flex: 0 0 45%;
    padding: 4px;
    margin: 8px 12px;
}

div.box-item img {
    float: left;
    width: 30px;
    height: 30px;
    fill: #888;

}
div.box-item p {
    margin: 0 0 0 50px;
}

div.box-item ul {
    margin: 0 0 0 50px;
    padding-left: 20px;
}

hr.box-sep {
    margin: 1em 2em;
}

@media only screen and (max-width: 930px){
    div.box-item {
        flex: 0 0 90%;
    }
}


/* multi colunm TOC */
.contents ul {
    list-style-type: none;
    padding-left: 2em;
}

.contents > ul {
    padding-left: 0;
}

.multicol-toc > ul {
    column-width: 250px;
    column-gap: 60px;
    -webkit-column-width: 250px;
    -moz-column-width: 250px;
    column-rule: 1px solid #ccc;
}

.multicol-toc > li {
       /* break inside is not yet broadly supported, but we just try */
    break-inside: avoid-column;
    -moz-break-inside: avoid-column;
    -webkit-break-inside: avoid-column;
}

.contents > ul > li > a {
    font-size: 1.0em;
}


.mpl-button {
    background: #11557C;
    font-weight: normal;
    display: inline-block;
    padding: 0 1em;
    line-height: 2.8;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    z-index: 1;
    transition: background .25s ease;
}

.mpl-button:hover, .mpl-button:active, .mpl-button:focus {
    background: #003c63;
    outline-color: #003c63;
}


/* Hide red ¶ between the thumbnail and caption in gallery

Due the way that sphinx-gallery floats its captions the perma-link
does not float with it.
*/
.sphx-glr-thumbcontainer p.caption:hover > a.headerlink{
    visibility: hidden;
}

/* slightly reduce horizontal margin compared to gallery.css to
 * get four columns of thumbnails in the pydata-sphinx-theme. */
.sphx-glr-thumbcontainer {
    margin: 5px 2px;
}

/* workaround: the default padding decenters the image inside the frame */
.sphx-glr-thumbcontainer .figure {
    padding: 0;
}

/* hide note linking to the download section at the bottom of galleries
 * as suggested in https://github.com/sphinx-gallery/sphinx-gallery/issues/760
 */
div.sphx-glr-download-link-note {
    height: 0px;
    visibility: hidden;
}

/* re-style the download button */
div.sphx-glr-download a {
    background-color: #E3F0F6;
    background-image: none;
    color: #11557c;
    border: 0;
}

div.sphx-glr-download a:hover {
    background-color: #BCD4DF;
}

/* Do not fold multiple figures in examples into two column layout. */
img.sphx-glr-multi-img {
    max-width: 100%;
}

table.property-table th,
table.property-table td {
    padding: 4px 10px;
}

.sidebar-cheatsheets, .sidebar-donate {
    margin: 2.75rem 0;
}

.sidebar-donate .mpl-button {
    /* fix width to width of cheatsheet */
    width: 210px;
}

/* Two columns for install code blocks */
div.twocol {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    gap: 20px;
}

div.twocol > div {
    flex-grow: 1;
    padding: 0;
    margin: 0;
}

/* Fix selection of parameter names; remove when fixed in the theme
 * https://github.com/sphinx-doc/sphinx/pull/9763
 */
.classifier:before {
    display: inline-block;
    margin: 0 0.5em;
}