.primer-content,
.editor-preview {
    word-break: break-word;
}

.editor-preview {
    background-color: #fff !important;
    border-left: 5px solid #eee;
    border-radius: 5px;
}

.primer-content blockquote,
.editor-preview blockquote {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
    border-left: 5px solid #C85021;
}

.primer-content blockquote>*:first-child,
.editor-preview blockquote>*:first-child {
    margin-top: 0px;
}

.primer-content blockquote>*:last-child,
.editor-preview blockquote>*:last-child {
    margin-bottom: 0px;
}

.primer-content h1,
.editor-preview h1,
.primer-content .h1,
.editor-preview .h1 {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 30px;
}

.primer-content h2,
.editor-preview h2,
.primer-content .h2,
.editor-preview .h2 {
    font-size: 1.6em;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 30px;
}

.primer-content h3,
.editor-preview h3,
.primer-content .h3,
.editor-preview .h3 {
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 30px;
}

.primer-content h4,
.editor-preview h4,
.primer-content .h4,
.editor-preview .h4 {
    font-size: 1.2em;
    font-weight: 700;
}

.primer-content h5,
.editor-preview h5,
.primer-content .h5,
.editor-preview .h5 {
    font-size: 1em;
    font-weight: 700;
}

.primer-content h6,
.editor-preview h6,
.primer-content .h6,
.editor-preview .h6 {
    font-size: 0.8em;
    font-weight: 600;
}

.primer-content h1:first-child,
.editor-preview h1:first-child,
.primer-content h2:first-child,
.editor-preview h2:first-child,
.primer-content h3:first-child,
.editor-preview h3:first-child,
.primer-content h4:first-child,
.editor-preview h4:first-child,
.primer-content h5:first-child,
.editor-preview h5:first-child,
.primer-content .h1:first-child,
.editor-preview .h1:first-child,
.primer-content .h2:first-child,
.editor-preview .h2:first-child,
.primer-content .h3:first-child,
.editor-preview .h3:first-child,
.primer-content .h4:first-child,
.editor-preview .h4:first-child,
.primer-content .h5:first-child,
.editor-preview .h5:first-child {
    margin-top: 0px;
}

.primer-content p,
.primer-content li,
.editor-preview p,
.editor-preview li {
    font-size: 1.1rem;
}



.editor-preview ol,
.primer-content ol {
    list-style: none;
    counter-reset: item;
}

.editor-preview ol > li,
.primer-content ol > li {
    counter-increment: item;
    margin-bottom: 5px;
}

.editor-preview ol > li:before,
.primer-content ol > li:before {
    margin-left: -38px;
    content: counter(item) '.';
    color: #C85021;
    width: 2em;
    text-align: right;
    display: inline-block;
    padding-right: 5px;
}

.primer-content li p,
.primer-content blockquote p,
.editor-preview li p,
.editor-preview blockquote p {
    font-size: 1.2em;
}

.primer-content.primer-content-sm p,
.primer-content.primer-content-sm li {
    font-size: inherit
}

.primer-content hr,
.editor-preview hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.primer-content ul,
.primer-content ol,
.editor-preview ul,
.editor-preview ol {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.primer-content p + ul,
.primer-content p + ol,
.editor-preview p + ul,
.editor-preview p + ol {
    padding-top: 5px;
}

.primer-content ul:first-child,
.primer-content ol:first-child,
.editor-preview ul:first-child,
.editor-preview ol:first-child {
    margin-top: 0px;
}
.primer-content ul:last-child,
.primer-content ol:last-child,
.editor-preview ul:last-child,
.editor-preview ol:last-child {
    margin-bottom: 0px;
}

.primer-content ul ul,
.primer-content ol ol,
.editor-preview ul ul,
.editor-preview ol ol {
    padding-top: 0px;
    padding-bottom: 0px;
}

.primer-content ul,
.editor-preview ul {
    list-style: none;
}

.primer-content ul li:not(.vjs-menu-item)::before,
.editor-preview ul li:not(.vjs-menu-item)::before {
    content: ">" / "";
    color: #C85021;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.primer-content li:not(:last-of-type),
.editor-preview li:not(:last-of-type) {
    padding-bottom: 10px;
}

.primer-content.markdown-preview .footnote-ref,
.primer-content.markdown-preview .footnotes {
    display: none
}

/* A card shows the opening of an article held in the new editor. The blocks
   are the article's own, rendered on the server, so the height is capped here
   and the last of it fades out, in place of the markdown path's character
   truncation. */
.primer-content.sl-preview-clip {
    position: relative;
    max-height: 200px;
    overflow: hidden;
}

.primer-content.sl-preview-clip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

/* Without this a tall image is the whole teaser. */
.primer-content.sl-preview-clip img {
    max-height: 90px;
    width: auto;
}
/* A card is drawn by the server, so the editor's own stylesheet — which
   travels with the viewer bundle — is not on a page whose only Lexical
   content is a card. Loading it for one would defeat the point: a stylesheet
   arriving after the page restyles the card and moves it, which is what
   rendering the card here avoided. So the handful of rules a teaser actually
   needs live here instead, where they are on every page already, scoped to
   the card so nothing else can be touched by them.
   Deliberately less than react_frontend/src/lexical/lexical.css: a clipped
   three-block taste of an article does not need the whole content model, and
   test_render.py keeps this list and the renderer's output in step. */
.primer-content.sl-preview-clip {
    --sl-preview-accent: #34b5e9;
}

.primer-content.sl-preview-clip .sl-text--underline {
    text-decoration: underline;
}

.primer-content.sl-preview-clip .sl-image-wrap {
    display: block;
}

.primer-content.sl-preview-clip .sl-image-wrap--auto .sl-image {
    max-width: 100%;
    height: auto;
}

.primer-content.sl-preview-clip .sl-image-wrap--full .sl-image {
    width: 100%;
    height: auto;
}

/* The rules above lay every image out as a centred block, so alignment has to
   be set through the margins to have any effect. */
.primer-content.sl-preview-clip .sl-image-wrap--left {
    text-align: left;
}

.primer-content.sl-preview-clip .sl-image-wrap--left .sl-image {
    margin-left: 0;
    margin-right: auto;
}

.primer-content.sl-preview-clip .sl-image-wrap--center {
    text-align: center;
}

.primer-content.sl-preview-clip .sl-image-wrap--center .sl-image {
    margin-left: auto;
    margin-right: auto;
}

.primer-content.sl-preview-clip .sl-image-wrap--right {
    text-align: right;
}

.primer-content.sl-preview-clip .sl-image-wrap--right .sl-image {
    margin-left: auto;
    margin-right: 0;
}

/* No icon on a card's callout: the glyph comes from a Font Awesome weight the
   editor's stylesheet asks for, and a teaser can say what it is with the box
   alone. */
.primer-content.sl-preview-clip .sl-callout {
    border-radius: 0.75em;
    border: 1px solid;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.primer-content.sl-preview-clip .sl-callout > *:last-child {
    margin-bottom: 0;
}

.primer-content.sl-preview-clip .sl-callout--alert {
    color: white;
    background-color: var(--sl-preview-accent);
    border-color: var(--sl-preview-accent);
}

.primer-content.sl-preview-clip .sl-callout--info {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.primer-content.sl-preview-clip .sl-section-summary {
    border-left: 4px solid var(--sl-preview-accent);
    border-radius: 0 6px 6px 0;
    background: #f4fafd;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.primer-content.sl-preview-clip .sl-section-summary > *:last-child {
    margin-bottom: 0;
}

/* Lexical keeps a cell's text in a paragraph, which brings the article's
   larger paragraph size in with it and makes a table several lines taller
   than the same one on a markdown page. */
.primer-content.sl-preview-clip .sl-table td > p,
.primer-content.sl-preview-clip .sl-table th > p {
    font-size: inherit;
    line-height: inherit;
}

.primer-content.sl-preview-clip .sl-table td > p:last-child,
.primer-content.sl-preview-clip .sl-table th > p:last-child {
    margin-bottom: 0;
}

.editor-preview .footnote-ref a,
.primer-content .footnote-ref a {
    margin-left: 2px;
    font-size: 0.8em;
    font-weight: bold;
}

.editor-preview .footnotes p, .editor-preview .footnotes br {
    display: none
}

.editor-preview .footnotes li p {
    display: block
}

.primer-content .footnotes:before,
.editor-preview .footnotes:before {
    display: inline-block;
    content: "";
    border-top: 1px solid #ccc;
    width: calc(100% - 30px);
    margin: 0 1rem;
    transform: translateY(-0.4rem);
}

.editor-preview .footnotes ol,
.primer-content .footnotes ol {
    list-style: revert;
}

.editor-preview .footnotes  ol > li,
.primer-content .footnotes ol > li {
    counter-increment: none;
    font-weight: bold
}

.editor-preview .footnotes  ol > li a[href],
.primer-content .footnotes ol > li a[href] {
    color: inherit;
    text-decoration: underline;
}


.editor-preview .footnotes  ol > li:before,
.primer-content .footnotes  ol > li:before {
    margin-left: inherit;
    content: '';
    width: 0em;
    text-align: left;
    display: none;
    padding-right: 0px;
}

.primer-content .footnotes ol,
.editor-preview .footnotes ol {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
    border-radius: 0px;
}

.primer-content .footnotes ol ol,
.editor-preview .footnotes ol ol {
    padding-top: 0px;
    padding-bottom: 0px;
}

.primer-content .footnotes li p,
.editor-preview .footnotes li p {
    font-size: 1em;
    margin-bottom: 0;

}
.primer-content .footnotes li,
.editor-preview .footnotes li {
    font-size: 0.9em;
}

.primer-content .footnotes li:not(:last-of-type),
.editor-preview .footnotes li:not(:last-of-type) {
    padding-bottom: 0px;
}

.primer-content .footnotes ol,
.editor-preview .footnotes ol {
    padding-inline-start: 20px;
}

.primer-content .footnotes a.footnote,
.editor-preview .footnotes a.footnote {
    display: none;
}

.primer-content li:not(:last-of-type),
.editor-preview li:not(:last-of-type) {
    padding-bottom: 10px;
}

.primer-content img,
.editor-preview img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.primer-content table,
.editor-preview table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 35px;
}

.primer-content table td,
.editor-preview table td,
.primer-content table th,
.editor-preview table th {
    border: 1px solid #ddd;
    padding: 8px;
    /* The content wrapper's word-break: break-word is inherited here, and
       for automatic table layout it means a word may be split anywhere, so a
       column's minimum width is about one character. A label column next to
       a column of long text then gets squeezed until its words wrap mid-word
       ("Professi / onal"). Normal breaking makes a word the narrowest a
       column can be; a string with no break in it widens its column instead
       of splitting. */
    word-break: normal;
    overflow-wrap: break-word;
}



.primer-content table th,
.editor-preview table th {
    text-align: left;
    background-color: #FFE8B0;
    font-weight: 700;
    vertical-align: bottom;
}

.primer-content.primer-content-sm {
    font-size: 100%
}

/* AMBITION */

.primer-content.ai-style h6,
.editor-preview.ai-style h6,
.ai-style .primer-content h6,
.ai-style .editor-preview h6,
.primer-content.ai-style .h6,
.editor-preview.ai-style .h6,
.ai-style .primer-content .h6,
.ai-style .editor-preview .h6 {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #FFE8B0;
    font-weight: normal;
    font-size: inherit;
}

.primer-content.ai-style h6:not(:last-of-type),
.editor-preview.ai-style h6:not(:last-of-type),
.ai-style .primer-content h6:not(:last-of-type),
.ai-style .editor-preview h6:not(:last-of-type) {
    margin-bottom: 0px;
}

/* AMBITION CUSTOM ARTICLE OBJECTS */
.primer-content.ai-style-special,
.ai-style-special .primer-content,
.editor-preview.ai-style-special,
.ai-style-special .editor-preview {
    --ai-color-dark-grey: #474c48;
    --ai-color-steplab-blue: #34b4e9;
    --ai-color-dark-blue: #006fb7;
    --ai-color-light-grey: #e6e7e8;
    --ai-border-thick-solid: 3px solid;
}

.ai-style-special hr {
    border-top: 1px solid rgba(0, 0, 0, .5);
}

.ai-style-special .module-principles,
.ai-style-special .key-ideas-summary,
.ai-style-special .steplab-table,
.ai-style-special .lesson-transcript,
.ai-style-special .transcript-image,
.ai-style-special .pause-reflect-respond {
    color: var(--ai-color-dark-grey);
    padding: 20px 24px;
    margin: 24px 0;
    font-size: 1.1rem;
}

.ai-style-special .module-principles ul,
.ai-style-special .key-ideas-summary ul,
.ai-style-special .steplab-table ul,
.ai-style-special .lesson-transcript ul,
.ai-style-special .transcript-image ul,
.ai-style-special .pause-reflect-respond ul {
    margin: 0 0 0 20px;
    padding: 0;
}

.ai-style-special .module-principles ul li,
.ai-style-special .key-ideas-summary ul li,
.ai-style-special .steplab-table ul li,
.ai-style-special .lesson-transcript ul li,
.ai-style-special .transcript-image ul li,
.ai-style-special .pause-reflect-respond ul li {
    list-style: none;
    padding-bottom: 10px;
}

.ai-style-special .module-principles ul li::before,
.ai-style-special .key-ideas-summary ul li::before,
.ai-style-special .steplab-table ul li::before,
.ai-style-special .lesson-transcript ul li::before,
.ai-style-special .transcript-image ul li::before,
.ai-style-special .pause-reflect-respond ul li::before {
    content: ">" / "";
    color: #C85021;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.ai-style-special .module-principles h2,
.ai-style-special .module-principles h3,
.ai-style-special .key-ideas-summary h2,
.ai-style-special .key-ideas-summary h3,
.ai-style-special .steplab-table h2,
.ai-style-special .steplab-table h3,
.ai-style-special .lesson-transcript h2,
.ai-style-special .lesson-transcript h3,
.ai-style-special .transcript-image h2,
.ai-style-special .transcript-image h3,
.ai-style-special .pause-reflect-respond h2,
.ai-style-special .pause-reflect-respond h3 {
    margin: 0 0 1rem 0;
}

.ai-style-special .module-principles {
    border: var(--ai-border-thick-solid) var(--ai-color-steplab-blue);
    box-sizing: border-box;
}

.ai-style-special .key-ideas-summary {
    background-color: rgba(5, 112, 183, 0.10);
}

.ai-style-special .pullout-quote {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    margin: 0;
    min-width: 0;
}

.ai-style-special .pullout-quote .quote-left {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-size: 3rem;
    font-weight: bold;
    color: var(--ai-color-steplab-blue);
    margin: 0;
}

.ai-style-special .pullout-quote .quote {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 20px 30px 20px 20px;
    align-self: center;
}

.ai-style-special .pullout-quote .quote p {
    margin: 0;
}

.ai-style-special .pullout-quote .quote-right {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    font-size: 3rem;
    font-weight: bold;
    color: var(--ai-color-steplab-blue);
    margin: 0;
    line-height: 0.8;
}

.ai-style-special .steplab-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.ai-style-special .steplab-table {
    width: 100%;
    border-collapse: collapse;
    background: #FFF;
    margin-bottom: 1.5rem;
    border: var(--ai-border-thick-solid) var(--ai-color-dark-blue);
}

.ai-style-special .steplab-table caption {
    caption-side: top;
    font-weight: bold;
    margin-bottom: 8px;
}

.ai-style-special .steplab-table th,
.ai-style-special .steplab-table td {
    border: 1px solid var(--ai-color-dark-blue);
    padding: 12px 15px;
    vertical-align: top;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

.ai-style-special .steplab-table thead th {
    background: var(--ai-color-dark-blue);
    color: #FFF;
    font-weight: bold;
}

.ai-style-special .steplab-table th,
.ai-style-special .steplab-table thead th {
    /* 2px <th> + 1px of first <td> --> 3px header bottom-border-width */
    border-bottom-width: 2px;
}

.ai-style-special .steplab-table a {
    color: var(--ai-color-dark-blue);
    text-decoration: underline;
    font-weight: bold;
}

.ai-style-special .lesson-plan .steplab-table {
    border-color: var(--ai-color-dark-grey);
}

.ai-style-special .lesson-plan .steplab-table th,
.ai-style-special .lesson-plan .steplab-table td {
    border-color: var(--ai-color-dark-grey);
}

.ai-style-special .lesson-plan .steplab-table thead th {
    background: var(--ai-color-light-grey);
    color: var(--ai-color-dark-grey);
}

.ai-style-special .lesson-transcript {
    border: var(--ai-border-thick-solid) var(--ai-color-dark-blue);
}

.ai-style-special .transcript-image {
    border: var(--ai-border-thick-solid) var(--ai-color-dark-blue);
    padding: 0;
}

.ai-style-special .transcript-image p {
    margin: 0;
    padding: 0;
}

.ai-style-special .lesson-transcript.with-image:has(+ .transcript-image) {
    margin-bottom: 0;
    border-bottom: 0;
}

.ai-style-special .lesson-transcript.with-image:has(+ .transcript-image) + .transcript-image {
    margin-top: 0 !important;
}

.ai-style-special .transcript-image:has(+ .lesson-transcript.with-image) {
    margin-bottom: 0;
    border-bottom: 0;
}

.ai-style-special .transcript-image:has(+ .lesson-transcript.with-image) + .lesson-transcript {
    margin-top: 0 !important;
}

.ai-style-special .pause-reflect-respond {
    border: var(--ai-border-thick-solid) #ffcc00;
}

.ai-style-special .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .ai-style-special .steplab-table thead,
    .ai-style-special .steplab-table tbody,
    .ai-style-special .steplab-table th,
    .ai-style-special .steplab-table td,
    .ai-style-special .steplab-table tr {
        display: block;
        width: auto;
    }

    .ai-style-special .steplab-table td,
    .ai-style-special .steplab-table th {
        padding: 10px 12px;
        border-top: 1px solid var(--ai-color-dark-blue);
        border-bottom: none;
        border-left: none;
        border-right: none;
    }

    .ai-style-special .steplab-table th:first-of-type {
        border-top: none;
    }

    .ai-style-special .steplab-table tr {
        margin-bottom: 1rem;
        border: none;
    }

    .ai-style-special .steplab-table td:last-of-type,
    .ai-style-special .steplab-table th:last-of-type {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: var(--ai-color-dark-blue);
    }

    .ai-style-special .lesson-plan .steplab-table td:last-of-type,
    .ai-style-special .lesson-plan .steplab-table th:last-of-type {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: var(--ai-color-dark-grey);
    }

    .ai-style-special .steplab-table th:last-of-type,
    .ai-style-special .lesson-plan .steplab-table th:last-of-type {
        /*  Match `--ai-border-thick-solid` */
        border-bottom-width: 3px;
    }
}
/* END AMBITION CUSTOM ARTICLE OBJECTS */

/* END AMBITION */

.math {
    color: #efefef;
    font-size: 1.1rem;
}
.math.math-rendering, code.lang-math {
    color: #474C68
}

.math .katex {
    color: #474C68
}

.editor-preview code.lang-alert,
.editor-preview code.lang-info,
.primer-content code.language-alert,
.primer-content code.language-info {
    border-radius: 0.75em;
    border: 1px solid;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    display: block;
    font-size: 1.1rem;
    text-wrap: wrap;
}
.editor-preview code.lang-alert,
.primer-content code.language-alert {
    color: white;
    background-color: #34B5E9;
    border-color: #34B5E9;
}

.editor-preview code.lang-alert:before,
.primer-content code.language-alert:before {
    content: "\f321";
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    margin-right: 5px;
    font-size: 85%;
}

.editor-preview code.lang-info,
.primer-content code.language-info {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.editor-preview code.lang-info:before,
.primer-content code.language-info:before {
    content: "\f05a";
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    margin-right: 5px;
    font-size: 85%;
}

.editor-preview > p:first-child:empty,
.primer-content > p:first-child:empty {
    margin-bottom: 0;
}