/* ####################################
   Lists

   - Critical Rendering Path: Optional
   ################################## */

/* 
    All Lists 
    - It's usually best to leave these alone. :)
*/

ul {
}

    ul li {
    }

ol {
}

    ol li {
        margin: var(--site-margin-thin) 0;
    }

dl {
}

    dl dt {
        margin-bottom: calc(var(--site-box-margin-bottom) * 0.5);
        font-family: var(--site-h3-font-family);
        font-size: var(--site-h3-font-size);
        font-weight: var(--site-h3-font-weight);
        color: var(--site-h3-font-color);
        border-bottom: var(--site-color-ui-light) 1px dashed !important;
    }

        dl dt.hiddenByFilters + dd {
            display: none;
        }

    dl dd {
        margin-bottom: var(--site-box-margin-bottom);
    }

        dl dd :last-child {
            margin-bottom: 0 !important;
        }

/* 
    Lists in page content areas that aren't special lists.
    - Include .editorTinyMCE so they look right in the visual editor. 
    - Try to avoid overriding other kinds of individually configured list classes/styles.
*/

main #PageBody ul:not([class]):not([style]),
.editorTinyMCE ul:not([class]):not([style]) {
    list-style: none;
    line-height: var(--site-text-line-height);
    margin: 0 0 var(--site-box-margin-bottom);
}

    main #PageBody ul:not([class]):not([style]) li,
    .editorTinyMCE ul:not([class]):not([style]) li {
        margin: var(--site-margin-thin) 0;
    }

        main #PageBody ul:not([class]):not([style]) li:not([class]):not([style])::before,
        .editorTinyMCE ul:not([class]):not([style]) li:not([class]):not([style])::before {
            content: "\2022";
            color: var(--site-color-1-mid);
            margin-left: -0.9em;
            margin-right: 0.5em;
            font-size: 1.25em;
        }

        .editorTinyMCE [class*=bg-mid] ul:not([class]):not([style]) li:not([class]):not([style])::before,
        main #PageBody [class*=bg-dark] ul:not([class]):not([style]) li:not([class]):not([style])::before,
        main #PageBody [class*=bg-mid] ul:not([class]):not([style]) li:not([class]):not([style])::before,
        .editorTinyMCE [class*=bg-dark] ul:not([class]):not([style]) li:not([class]):not([style])::before {
            color: var(--site-color-1-light);
        }

main #PageBody ol:not([class]):not([style]),
.editorTinyMCE ol:not([class]):not([style]) {
    line-height: var(--site-text-line-height);
    margin: 0 0 var(--site-box-margin-bottom);
}

    main #PageBody ol:not([class]):not([style]) li,
    .editorTinyMCE ol:not([class]):not([style]) li {
        margin: var(--site-margin-thin) 0;
    }

main #PageBody li ul:not([class]):not([style]),
.editorTinyMCE li ul:not([class]):not([style]) {
    /* Second level unordered lists and below. */
    margin: 0;
}

main #PageBody li ol:not([class]):not([style]),
.editorTinyMCE li ol:not([class]):not([style]) {
    /* Second level ordered lists and below. */
    margin: 0;
}

/* 
    Some templates place #SecondaryContent in a thin column on larger screen sizes.
*/

@media screen and (min-width: 900px) {

    body.Template_threecols1 .secondary ul:not([class]),
    body.Template_threecols1 .secondary ol:not([class]),
    body.Template_twocols2 .secondary ul:not([class]),
    body.Template_twocols2 .secondary ol:not([class]) {
        padding-left: 0;
    }

        body.Template_threecols1 .secondary ul:not([class]) li,
        body.Template_threecols1 .secondary ol:not([class]) li,
        body.Template_twocols2 .secondary ul:not([class]) li,
        body.Template_twocols2 .secondary ol:not([class]) li {
            margin-left: 1.5em;
        }
}

/*
    Warnings, checks, crosses
    Note: Use [class] to target some items to strengthen specificity without using !important rules.
*/

ul.warnings,
ul.checks,
ul.crosses,
ul.info,
ul.help,
ul.pointers,
ul.circles,
ul[style*="circle"],
ul.discs,
ul[style*="disc"],
ul.squares,
ul[style*="square"] {
    list-style: none;
}

    ul.warnings > li,
    ul.checks > li,
    ul.crosses > li,
    ul.info > li,
    ul.help > li,
    ul.pointers > li,
    ul.circles > li,
    ul[style*="circle"] > li,
    ul.discs > li,
    ul[style*="disc"] > li,
    ul.squares > li,
    ul[style*="square"] > li {
        margin: var(--site-margin-thin) 0;
    }

        ul.warnings > li::before,
        ul > li.warning::before,
        ul.checks > li::before,
        ul > li.check::before,
        ul.crosses > li::before,
        ul > li.cross::before,
        ul.info > li::before,
        ul > li.info::before,
        ul.help > li::before,
        ul > li.help::before,
        ul.pointers > li::before,
        ul > li.pointer::before,
        ul.circles > li::before,
        ul > li.circle::before,
        ul[style*="circle"] > li::before,
        ul.discs > li::before,
        ul > li.disc::before,
        ul[style*="disc"] > li::before,
        ul.squares > li::before,
        ul > li.square::before,
        ul[style*="square"] > li::before {
            /* Match .icon - Do it manually because we don't have SASS. */
            position: relative;
            -moz-osx-font-smoothing: greyscale;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            vertical-align: baseline;
            height: 1.25em;
            width: 1.25em;
            margin-right: 0.5em;
            margin-left: -1.75em; /* Icon width + margin-right to get a neat offset. */
            text-align: center;
            font-family: var(--site-icon-font-family);
            font-weight: var(--site-icon-font-weight-lists);
            font-size: 1em;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            line-height: 1.25em;
        }

ul.circles,
ul[style*="circle"] {
}

    ul.circles > li,
    ul[style*="circle"] > li,
    ul > li.circle {
        list-style: none;
    }

        ul.circles > li::before,
        ul[style*="circle"] > li::before,
        ul > li.circle::before,
        ul[class] > li.circle::before {
            content: "\2022";
            color: var(--site-color-1-light);
            text-shadow: 1px 1px var(--site-color-1-mid);
        }

        ul.circles:not(.warnings):not(.checks):not(.crosses):not(.info):not(.help) > li:not([class])::before,
        ul[style*="circle"]:not(.warnings):not(.checks):not(.crosses):not(.info):not(.help) > li:not([class])::before,
        ul > li.circle::before,
        ul[class] > li.circle::before {
            /* Only transform dots that aren't icons. */
            transform: scale(1.5) translateY(-0.1em);
        }

ul.discs,
ul[style*="disc"] {
}

    ul.discs > li,
    ul[style*="disc"] > li,
    ul > li.disc {
        list-style: none;
    }

        ul.discs > li::before,
        ul[style*="disc"] > li::before,
        ul > li.disc::before,
        ul[class] > li.disc::before {
            content: "\25cb";
            color: var(--site-color-1-light);
            text-shadow: 1px 1px var(--site-color-1-mid);
        }

        ul.discs:not(.warnings):not(.checks):not(.crosses):not(.info):not(.help) > li:not([class])::before,
        ul[style*="disc"]:not(.warnings):not(.checks):not(.crosses):not(.info):not(.help) > li:not([class])::before,
        ul > li.disc::before,
        ul[class] > li.disc::before {
            /* Only transform dots that aren't icons. */
            transform: scale(1.1) translateY(-0.1em);
        }

ul.squares,
ul[style*="square"] {
}

    ul.squares > li,
    ul[style*="square"] > li,
    ul > li.square {
        list-style: none;
    }

        ul.squares > li::before,
        ul[style*="square"] > li::before,
        ul > li.square::before,
        ul[class] > li.square::before {
            content: "\025aa";
            color: var(--site-color-1-light);
            text-shadow: 1px 1px var(--site-color-1-mid);
        }

        ul.squares:not(.warnings):not(.checks):not(.crosses):not(.info):not(.help) > li:not([class])::before,
        ul[style*="square"]:not(.warnings):not(.checks):not(.crosses):not(.info):not(.help) > li:not([class])::before,
        ul > li.square::before,
        ul[class] > li.square::before {
            /* Only transform squares that aren't icons. */
            transform: scale(1.5) translateY(-0.1em);
        }

ul.pointers {
}

    ul.pointers > li,
    ul > li.pointer {
        list-style: none;
    }

        ul.pointers > li::before,
        ul > li.pointer::before,
        ul[class] > li.pointer::before {
            content: "\f054";
            color: var(--site-color-ui-light);
            text-shadow: 1px 1px var(--site-color-ui-mid);
        }

        [class*=bg-mid-dark-] ul.pointers > li::before,
        [class*=bg-mid-dark-] ul > li.pointer::before,
        [class*=bg-mid-dark-] ul[class] > li.pointer::before,
        [class*=bg-dark] ul.pointers > li::before,
        [class*=bg-dark] ul > li.pointer::before,
        [class*=bg-dark] ul[class] > li.pointer::before,
        [class*=bg-darker] ul.pointers > li::before,
        [class*=bg-darker] ul > li.pointer::before,
        [class*=bg-darker] ul[class] > li.pointer::before,
        [class*=bg-darkest] ul.pointers > li::before,
        [class*=bg-darkest] ul > li.pointer::before,
        [class*=bg-darkest] ul[class] > li.pointer::before {
            color: var(--site-link-color-bright);
        }

    ul.pointers.indent-none {
        margin-left: 1.5em !important;
    }
    
ul.circles.pointers > li::before,
ul[style*="circle"].pointers > li::before,
ul.circles > li.pointer::before {
    content: "\f138";
    color: var(--site-color-1-mid);
    text-shadow: none;
}

        ul.discs.pointers > li::before,
        ul[style*="disc"].pointers > li::before,
        ul.discs > li.pointer::before {
            content: "\f138";
            font-family: var(--site-icon-font-family); /* Requires licensing - doesn't exist in Font Awesome Free. */
            font-weight: 400;
            color: var(--site-color-1-mid);
            text-shadow: none;
        }

        ul.squares.pointers > li::before,
        ul[style*="square"].pointers > li::before,
        ul.squares > li.pointer::before {
            content: "\f32b";
            font-family: var(--site-icon-font-family); /* Requires licensing - doesn't exist in Font Awesome Free. */
            color: var(--site-color-1-mid);
            text-shadow: none;
        }

ul.warnings {
}

    ul.warnings > li,
    ul > li.warning {
        list-style: none;
    }

        ul.warnings > li::before,
        ul > li.warning::before,
        ul[class] > li.warning::before {
            content: "\f071";
            color: #ff9900;
            text-shadow: 1px 1px #994800;
        }

        ul.circles.warnings > li::before,
        ul[style*="circle"].warning > li::before,
        ul.circles > li.warning::before {
            content: "\f06a";
            text-shadow: none;
        }

        ul.discs.warnings > li::before,
        ul[style*="disc"].warning > li::before,
        ul.discs > li.warning::before {
            content: "\f06a";
            font-family: var(--site-icon-font-family); /* Requires licensing - doesn't exist in Font Awesome Free. */
            font-weight: 400;
            text-shadow: none;
        }

        ul.squares.warnings > li::before,
        ul[style*="square"].warning > li::before,
        ul.squares > li.warning::before {
            content: "\f321";
            font-family: var(--site-icon-font-family); /* Requires licensing - doesn't exist in Font Awesome Free. */
            text-shadow: none;
        }

ul.checks {
}

    ul.checks > li,
    ul > li.check {
        list-style: none;
    }

        ul.checks > li::before,
        ul > li.check::before,
        ul[class] > li.check::before {
            content: "\f00c";
            color: #33cc33;
            text-shadow: 1px 1px #004800;
        }

        ul.circles.checks > li::before,
        ul[style*="circle"].checks > li::before,
        ul.circles > li.check::before {
            content: "\f058";
            text-shadow: none;
        }

        ul.discs.checks > li::before,
        ul[style*="disc"].checks > li::before,
        ul.discs > li.check::before {
            content: "\f058";
            font-weight: 400;
            text-shadow: none;
        }

        ul.squares.checks > li::before,
        ul[style*="square"].checks > li::before,
        ul.squares > li.check::before {
            content: "\f14a";
            text-shadow: none;
        }

ul.crosses {
}

    ul.crosses > li,
    ul > li.cross {
        list-style: none;
    }

        ul.crosses > li::before,
        ul > li.cross::before,
        ul[class] > li.cross::before {
            content: "\f00d";
            color: #cc0000;
            text-shadow: 1px 1px #330000;
        }

        ul.circles.crosses > li::before,
        ul[style*="circle"].crosses > li::before,
        ul.circles > li.cross::before {
            content: "\f057";
            text-shadow: none;
        }

        ul.discs.crosses > li::before,
        ul[style*="disc"].crosses > li::before,
        ul.discs > li.cross::before {
            content: "\f057";
            font-weight: 400;
            text-shadow: none;
        }

ul.squares.crosses > li::before,
ul[style*="square"].crosses > li::before,
ul.squares > li.cross::before {
    content: "\f410";
    font-family: var(--site-icon-font-family);
    content: "\f2d3";
    text-shadow: none;
}

ul.info {
}

    ul.info > li,
    ul > li.info {
        list-style: none;
    }

        ul.info > li::before,
        ul > li.info::before,
        ul[class] > li.info::before {
            content: "\f129";
            color: #A0C2AD;
            text-shadow: 1px 1px #40624d;
        }

        ul.circles.info > li::before,
        ul[style*="circle"].info > li::before,
        ul.circles > li.info::before {
            content: "\f05a";
            text-shadow: none;
        }

        ul.discs.info > li::before,
        ul[style*="disc"].info > li::before,
        ul.discs > li.info::before {
            content: "\f05a";
            font-family: var(--site-icon-font-family); /* Requires licensing - doesn't exist in Font Awesome Free. */
            font-weight: 400;
            text-shadow: none;
        }

        ul.squares.info > li::before,
        ul[style*="square"].info > li::before,
        ul.squares > li.info::before {
            content: "\f30f";
            font-family: var(--site-icon-font-family); /* Requires licensing - doesn't exist in Font Awesome Free. */
            text-shadow: none;
        }

ul.help {
}

    ul.help > li,
    ul > li.help {
        list-style: none;
    }

        ul.help > li::before,
        ul > li.help::before,
        ul[class] > li.help::before {
            content: "\f128";
            /*color: #7CB8E1;
            text-shadow: 1px 1px #5C88b1;*/
            color: #2a52be;
            text-shadow: 1px 1px rgba(204,204,255,1);
        }

        ul.circles.help > li::before,
        ul[style*="circle"].help > li::before,
        ul.circles > li.help::before {
            content: "\f059";
            text-shadow: none;
        }

        ul.discs.help > li::before,
        ul[style*="disc"].help > li::before,
        ul.discs > li.help::before {
            content: "\f059";
            font-family: var(--site-icon-font-family); /* Requires licensing - doesn't exist in Font Awesome Free. */
            font-weight: 400;
            text-shadow: none;
        }

        ul.squares.help > li::before,
        ul[style*="square"].help > li::before,
        ul.squares > li.help::before {
            content: "\f2fd";
            font-family: var(--site-icon-font-family); /* Requires licensing - doesn't exist in Font Awesome Free. */
            text-shadow: none;
        }

/*
    Horizontal lists
    - 20211116 To do: This needs further work and testing
*/

ul.horizontal,
ol.horizontal {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 var(--site-box-margin-bottom);
    padding: 0;
    line-height: var(--site-text-line-height);
    list-style: none;
    align-items: flex-start;
    gap: var(--site-padding-thinner) var(--site-padding);
}

    ul.horizontal.space-between,
    ol.horizontal.space-between {
        width: 100%;
        justify-content: space-between;
    }

    ul.horizontal.space-around,
    ol.horizontal.space-around {
        width: 100%;
        justify-content: space-around;
    }

    ul.horizontal.space-evenly,
    ol.horizontal.space-evenly {
        width: 100%;
        justify-content: space-evenly;
    }

    ul.horizontal.align-items-top,
    ol.horizontal.align-items-top {
        align-items: flex-start;
    }

    ul.horizontal.align-items-center,
    ol.horizontal.align-items-center {
        align-items: center;
    }

    ul.horizontal.align-items-bottom,
    ol.horizontal.align-items-bottom {
        align-items: flex-end;
    }

    ul.horizontal li,
    ol.horizontal li {
        position: relative;
        margin: 0;
    }

    ul.horizontal.menu li {
        padding: 10px !important;
        margin-right: 10px !important;
        border-right: #c0c0c0 1px solid;
    }

    ul.horizontal.separators-between,
    ol.horizontal.separators-between {
        gap: var(--site-padding-thinner) calc(var(--site-padding) * 2);
    }

        ul.horizontal.separators-between li:not(:last-child),
        ol.horizontal.separators-between li:not(:last-child) {
        }

            ul.horizontal.separators-between li:not(:last-child)::after,
            ol.horizontal.separators-between li:not(:last-child)::after {
                position: absolute;
                content: "|";
                color: #745446;
                margin: 0 calc(var(--site-padding) - 2px); /* Room in the middle for the pipe character. */
            }

        ul.horizontal.separators-between[class*=space-],
        ol.horizontal.separators-between[class*=space-] {
        }

            ul.horizontal.separators-between[class*=space-] li:not(:last-child),
            ol.horizontal.separators-between[class*=space-] li:not(:last-child) {
            }

                ul.horizontal.separators-between[class*=space-] li:not(:last-child)::after,
                ol.horizontal.separators-between[class*=space-] li:not(:last-child)::after {
                    /* Note: This doesn't work well with space-between|around|evenly right now. */
                }

    .text-left ul.horizontal,
    ul.horizontal.text-left,
    .text-left ol.horizontal,
    ol.horizontal.text-left {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center ul.horizontal,
    ul.horizontal.text-center,
    .text-center ol.horizontal,
    ol.horizontal.text-center {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right ul.horizontal,
    ul.horizontal.text-right,
    .text-right ol.horizontal,
    ol.horizontal.text-right {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

        ul.horizontal.text-left[class*=space-],
        ul.horizontal.text-center[class*=space-],
        ul.horizontal.text-right[class*=space-],
        ol.horizontal.text-left[class*=space-],
        ol.horizontal.text-center[class*=space-],
        ol.horizontal.text-right[class*=space-] {
        }

            ul.horizontal.text-left[class*=space-] li,
            ul.horizontal.text-center[class*=space-] li,
            ul.horizontal.text-right[class*=space-] li,
            ol.horizontal.text-left[class*=space-] li,
            ol.horizontal.text-center[class*=space-] li,
            ol.horizontal.text-right[class*=space-] li {
                /* A quick hack that works okay for now. This needs attention at all the different screen sizes. */
                padding-left: calc(var(--site-gutters) * 0.5);
                padding-right: calc(var(--site-gutters) * 0.5);
            }

/*
    Lists at different screen sizes
*/

@media screen and (min-width: 1201px) {

    .text-left-large-only ul,
    ul.text-left-large-only,
    .text-left-large-only ol,
    ol.text-left-large-only {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center-large-only ul,
    ul.text-center-large-only,
    .text-center-large-only ol,
    ol.text-center-large-only {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right-large-only ul,
    ul.text-right-large-only,
    .text-right-large-only ol,
    ol.text-right-large-only {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

    ul.stack-large-only,
    ol.stack-large-only {
        display: block !important;
    }

        ul.stack-large-only li,
        ol.stack-large-only li {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

            ul.separators-between.stack-large-only li:not(:last-child)::after,
            ol.separators-between.stack-large-only li:not(:last-child)::after {
                content: "" !important;
                position: relative !important;
                display: block;
                background-color: #745446;
                height: 1px;
                width: 100%;
                margin: 10px 0 !important;
            }

}

@media screen and (max-width: 1200px) {

    .text-left-medium ul,
    ul.text-left-medium {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center-medium ul,
    ul.text-center-medium {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right-medium ul,
    ul.text-right-medium {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

    ul.stack-medium {
        display: block !important;
    }

        ul.stack-medium li {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

            ul.separators-between.stack-medium li:not(:last-child)::after {
                content: "" !important;
                position: relative !important;
                display: block;
                background-color: #745446;
                height: 1px;
                width: 100%;
                margin: 10px 0 !important;
            }

}

@media screen and (min-width: 901px) and (max-width: 1200px) {

    .text-left-medium-only ul,
    ul.text-left-medium-only {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center-medium-only ul,
    ul.text-center-medium-only {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right-medium-only ul,
    ul.text-right-medium-only {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

    ul.stack-medium-only {
        display: block !important;
    }

        ul.stack-medium-only li {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

            ul.separators-between.stack-medium-only li:not(:last-child)::after {
                content: "" !important;
                position: relative !important;
                display: block;
                background-color: #745446;
                height: 1px;
                width: 100%;
                margin: 10px 0 !important;
            }

}

@media screen and (max-width: 900px) {

    .text-left-small ul,
    ul.text-left-small {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center-small ul,
    ul.text-center-small {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right-small ul,
    ul.text-right-small {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

    ul.stack-small {
        display: block !important;
    }

        ul.stack-small li {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

            ul.separators-between.stack-small li:not(:last-child)::after {
                content: "" !important;
                position: relative !important;
                display: block;
                background-color: #745446;
                height: 1px;
                width: 100%;
                margin: 10px 0 !important;
            }

}

@media screen and (min-width: 601px) and (max-width: 900px) {

    .text-left-small-only ul,
    ul.text-left-small-only {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center-small-only ul,
    ul.text-center-small-only {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right-small-only ul,
    ul.text-right-small-only {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

    ul.stack-small-only {
        display: block !important;
    }

        ul.stack-small-only li {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

            ul.separators-between.stack-small-only li:not(:last-child)::after {
                content: "" !important;
                position: relative !important;
                display: block;
                background-color: #745446;
                height: 1px;
                width: 100%;
                margin: 10px 0 !important;
            }

}

@media screen and (max-width: 600px) {

    .text-left-tiny ul,
    ul.text-left-tiny {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center-tiny ul,
    ul.text-center-tiny {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right-tiny ul,
    ul.text-right-tiny {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

    ul.stack-tiny {
        display: block !important;
    }

        ul.stack-tiny li {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

            ul.separators-between.stack-tiny li:not(:last-child)::after {
                content: "" !important;
                position: relative !important;
                display: block;
                background-color: #745446;
                height: 1px;
                width: 100%;
                margin: 10px 0 !important;
            }

}

@media screen and (min-width: 376px) and (max-width: 600px) {

    .text-left-tiny-only ul,
    ul.text-left-tiny-only {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center-tiny-only ul,
    ul.text-center-tiny-only {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right-tiny-only ul,
    ul.text-right-tiny-only {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

    ul.stack-tiny-only {
        display: block !important;
    }

    ul.stack-tiny li {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

            ul.separators-between.stack-tiny li:not(:last-child)::after {
                content: "" !important;
                position: relative !important;
                display: block;
                background-color: #745446;
                height: 1px;
                width: 100%;
                margin: 10px 0 !important;
            }

}

@media screen and (max-width: 375px) {

    .text-left-micro ul,
    ul.text-left-micro {
        margin-left: 0;
        margin-right: auto;
        width: fit-content;
    }

    .text-center-micro ul,
    ul.text-center-micro {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .text-right-micro ul,
    ul.text-right-micro {
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
    }

    ul.stack-micro {
        display: block !important;
    }

        ul.stack-micro li {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

            ul.separators-between.stack-micro li:not(:last-child)::after {
                content: "" !important;
                position: relative !important;
                display: block;
                background-color: #745446;
                height: 1px;
                width: 100%;
                margin: 10px 0 !important;
            }

}

/*
    Menu Lists
*/

ul.menu-horizontal {
    position: relative;
    display: flex;
    margin: 0 0 var(--site-box-margin-bottom);
    padding: 0;
    line-height: var(--site-text-line-height);
    list-style: none;
    justify-content: space-evenly;
    gap: 1px;
}

    ul.menu-horizontal li {
        width: 100%;
        box-sizing: border-box;
        flex-grow: 1;
        margin: 0 !important;
        padding: var(--site-padding-thinner);
        text-align: center;
        background: var(--site-color-ui-lighter);
    }

        ul.menu-horizontal li a {
            /* Note: Fill the li space but use the same padding so that the li looks the same whether or has a link in it or regular content. */
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            margin: calc(var(--site-padding) * -0.5);
            padding: var(--site-padding-thinner);
            height: calc(100% + 30px);
        }

            ul.menu-horizontal li a:hover,
            ul.menu-horizontal li a[style]:hover {
                /* Strongly opinionated: If links are manually styled, implement the standard hover effect. */
                background: var(--site-link-color) !important;
                color: #fff !important;
            }

        ul.menu-horizontal li.page-current {
            background: var(--site-color-1-lighter);
        }

ul.menu-horizontal.menu-plain {
}

    ul.menu-horizontal.menu-plain li {
        background-color: transparent;
    }

    ul.menu-horizontal.menu-plain li:hover {
        background-color: var(--site-color-gray-lighter);
    }
    
@media screen and (max-width: 900px) {

    ul.menu-horizontal {
        flex-wrap: wrap;
    }

    ul.menu-horizontal li {
        width: calc(33.33% - 1px);
    }

    ul.menu-horizontal.menu-plain {
        border: var(--site-color-gray-lighter) 1px solid;
        background: var(--site-color-gray-lighter);
    }

        ul.menu-horizontal.menu-plain li {
            background: var(--site-color-white);
        }

}

@media screen and (max-width: 600px) {

    ul.menu-horizontal li {
        width: calc(50% - 1px);
    }

}

ul.menu-vertical {
    position: relative;
    display: block;
    margin: 0 0 var(--site-box-margin-bottom);
    padding: 0;
    list-style: none;
}

    ul.menu-vertical li {
        position: relative;
        margin: 0;
        padding: var(--site-padding-thinner) var(--site-padding);
        border-bottom-color: var(--site-color-1-lighter);
        border-bottom-width: var(--site-border-width);
        border-bottom-style: solid;
    }

        ul.menu-vertical li a {
            display: block;
            margin: calc(var(--site-padding) * -0.5) calc(var(--site-padding) * -1);
            padding: var(--site-padding-thinner) var(--site-padding);
        }

    ul.menu-vertical li.page-current {
        background: var(--site-color-1-lightest);
    }

/*
    Remove bullets and indents from lists
*/

ul.bullets-none {
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none;
}

    ul.bullets-none li {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

        ul.bullets-none li a::before {
            /* Strongly opinionated: This is a manually built list of links with different icons. */
            font-weight: var(--site-icon-font-weight-lists);
        }
    
ul.indent-none, 
ol.indent-none {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

    ul.indent-none:not(.bullets-none),
    ol.indent-none:not(.bullets-none) {
        margin-left: 0.75em !important;
        padding-left: 0.75em !important;
    }

/*
    Table of Contents
*/

.mce-toc, 
.toc {
    display: inline-block;
    font-size: var(--site-font-size-small);
    padding: var(--site-padding-thinner);
    min-width: calc(33.33% - var(--site-gutters-thick));
    border-color: var(--site-color-ui-light);
    border-width: var(--site-border-width);
    border-style: solid;
    border-radius: var(--site-box-border-radius);
}

    .mce-toc h2, 
    .toc h2 {
        margin: calc(var(--site-padding) * -0.5) calc(var(--site-padding) * -0.5) var(--site-padding-thinner) !important;
        padding: calc(var(--site-padding) * 0.333) var(--site-padding-thinner);
        font-size: var(--site-font-size-bigger);
        color: var(--site-color-white);
        background: var(--site-color-1-mid-dark);
        border-top-left-radius: var(--site-box-border-radius);
        border-top-right-radius: var(--site-box-border-radius);
    }

    .mce-toc ul, 
    .toc ul {
        list-style: none;
        margin: var(--site-margin-thinner) 0 0 !important;
        padding: 0;
    }

        .mce-toc ul li, 
        .toc ul li {
            margin: var(--site-margin-thinner) 0 0 !important;
        }

            .mce-toc ul li::before,
            .toc ul li::before {
                content: "" !important; /* Get rid of any ::before element added to standard unstyled lists. */
            }

        .mce-toc ul ul, 
        .toc ul ul {
            list-style: none;
            padding-left: var(--site-margin);
            font-size: 100%;
        }

            .mce-toc ul ul li, 
            .toc ul ul li {
                margin: 0 !important;
            }

/*
    Lists within Centered Blocks
    - Experimental
*/

.text-center ul { display: inline-block; width: auto; }
.text-center ol { display: inline-block; width: auto; }
.text-center dl { display: inline-block; width: auto; }

.text-center ul.horizontal { display: flex; justify-content: center; }
.text-center ol.horizontal { display: flex; justify-content: center; }

.text-center ul li { text-align: left; }
.text-center ol li { text-align: left; }

@media screen and (min-width: 901px) and (max-width: 1200px) {
    .text-center-medium-only ul  { display: inline-block; width: auto; }
    .text-center-medium-only ol { display: inline-block; width: auto; }
    .text-center-medium-only dl { display: inline-block; width: auto; }

    .text-center-medium-only ul.horizontal { display: flex; justify-content: center; }
    .text-center-medium-only ol.horizontal { display: flex; justify-content: center; }
    
    .text-center-medium-only ul li { text-align: left; }
    .text-center-medium-only ol li { text-align: left; }
}

@media screen and (max-width: 1200px) {
    .text-center-medium ul { display: inline-block; width: auto; }
    .text-center-medium ol { display: inline-block; width: auto; }
    .text-center-medium dl { display: inline-block; width: auto; }

    .text-center-medium ul.horizontal { display: flex; justify-content: center; }
    .text-center-medium ol.horizontal { display: flex; justify-content: center; }
    
    .text-center-medium ul li { text-align: left; }
    .text-center-medium ol li { text-align: left; }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    .text-center-small-only ul { display: inline-block; width: auto; }
    .text-center-small-only ol { display: inline-block; width: auto; }
    .text-center-small-only dl { display: inline-block; width: auto; }

    .text-center-small-only ul.horizontal { display: flex; justify-content: center; }
    .text-center-small-only ol.horizontal { display: flex; justify-content: center; }
    
    .text-center-small-only ul li { text-align: left; }
    .text-center-small-only ol li { text-align: left; }
}

@media screen and (max-width: 900px) {
    .text-center-small ul { display: inline-block; width: auto; }
    .text-center-small ol { display: inline-block; width: auto; }
    .text-center-small dl { display: inline-block; width: auto; }

    .text-center-small ul.horizontal { display: flex; justify-content: center; }
    .text-center-small ol.horizontal { display: flex; justify-content: center; }
    
    .text-center-small ul li { text-align: left; }
    .text-center-small ol li { text-align: left; }
}


@media screen and (min-width: 376px) and (max-width: 600px) {
    .text-center-tiny-only ul { display: inline-block; width: auto; }
    .text-center-tiny-only ol { display: inline-block; width: auto; }
    .text-center-tiny-only dl { display: inline-block; width: auto; }

    .text-center-tiny-only ul.horizontal { display: flex; justify-content: center; }
    .text-center-tiny-only ol.horizontal { display: flex; justify-content: center; }
    
    .text-center-tiny-only ul li { text-align: left; }
    .text-center-tiny-only ol li { text-align: left; }
}

@media screen and (max-width: 600px) {
    .text-center-tiny ul { display: inline-block; width: auto; }
    .text-center-tiny ol { display: inline-block; width: auto; }
    .text-center-tiny dl { display: inline-block; width: auto; }

    .text-center-tiny ul.horizontal { display: flex; justify-content: center; }
    .text-center-tiny ol.horizontal { display: flex; justify-content: center; }
    
    .text-center-tiny ul li { text-align: left; }
    .text-center-tiny ol li { text-align: left; }
}

@media screen and (max-width: 375px) {
    .text-center-micro ul { display: inline-block; width: auto; }
    .text-center-micro ol { display: inline-block; width: auto; }
    .text-center-micro dl { display: inline-block; width: auto; }

    .text-center-micro ul.horizontal { display: flex; justify-content: center; }
    .text-center-micro ol.horizontal { display: flex; justify-content: center; }
    
    .text-center-micro ul li { text-align: left; }
    .text-center-micro ol li { text-align: left; }
}