html, body {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    height: 100%;
    font: 16px/24px "Trebuchet MS", Helvetica, sans-serif;
    background: #f8f8f8;
    color: #4b4b4b;
}

.header {
    margin: 24px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    color: #888;
    box-shadow: 0 0 24px #f4f4f4;
    text-align: center;
}
.header svg {
    height: 48px;
}

.content {
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.content_i {
    flex-grow: 1;
    padding: 24px 5%;
}
.content a {
    color: #00617b;
}
.content a:hover {
    color: #1191b3;
}

.footer {
    border-top: 1px solid #e6e8ec;
    margin: 24px 24px 0;
    padding: 24px;
    text-align: center;
}

.footer_copyright a {
    color: #838b99;
    text-decoration: none;
}

.footer_copyright a:hover {
    color: #0b7794;
    text-decoration: underline;
}

.footer_icons {
    padding-top: 16px;
    display: flex;
    justify-content: center;
}

.footer_icons a {
    margin: 0 12px;
    text-decoration: none;
}

.footer_icons svg {
    height: 32px;
    fill: #838b99;
}

.footer_icons a:hover svg {
    fill: #0b7794;
}

.text-center {
    text-align: center;
}

/* Quill editor image alignment classes */
img.ql-img-align-left { float: left; margin: 0 1em 0.5em 0; }
img.ql-img-align-right { float: right; margin: 0 0 0.5em 1em; }
img.ql-img-align-center { display: block; margin: 0.5em auto; float: none; }

/*
 * Tables in article text (raw HTML tables). Colors derive from the current text color, so
 * this works on light and dark themes. Tables with Bootstrap's own .table class are left alone,
 * and inline styles / attributes in the article HTML still win.
 */
.article-content table:not(.table) {
    width: 100%;
    max-width: 100%;
    margin: 1.25rem 0;
    border-collapse: collapse;
    font-size: 0.95em;
    line-height: 1.5;
}
.article-content table:not(.table) caption {
    caption-side: top;
    padding: 0 0 0.5rem;
    font-weight: 600;
    text-align: left;
}
.article-content table:not(.table) th,
.article-content table:not(.table) td {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    vertical-align: top;
}
.article-content table:not(.table) th {
    background: rgba(128, 128, 128, 0.15);
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-weight: 600;
}
.article-content table:not(.table) th:not([align]) {
    text-align: left;
}
/* Bootstrap's reboot overrides the HTML align attribute on th, so honor it explicitly */
.article-content table:not(.table) :is(th, td)[align="center"] { text-align: center; }
.article-content table:not(.table) :is(th, td)[align="right"] { text-align: right; }
.article-content table:not(.table) tbody tr:nth-child(even) > td {
    background: rgba(128, 128, 128, 0.07);
    background: color-mix(in srgb, currentColor 4%, transparent);
}
.article-content table:not(.table) :is(th, td) > :first-child { margin-top: 0; }
.article-content table:not(.table) :is(th, td) > :last-child { margin-bottom: 0; }

/* Wide tables scroll sideways on small screens instead of breaking the layout */
@media (max-width: 767.98px) {
    .article-content table:not(.table) {
        display: block;
        overflow-x: auto;
    }
}