.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 #EC642D;
}

.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: #EC642D;
    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: #EC642D;
    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
}

.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;
}



.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,
.editor-preview.ai-style,
.ai-style .primer-content,
.ai-style .editor-preview {
    --ai-color-dark-grey: #474c48;
    --ai-color-steplab-blue: #34b4e9;
    --ai-color-dark-blue: #006fb7;
    --ai-color-light-grey: #e6e7e8;
    --ai-font-size-heading: 1.2rem;
    --ai-border-thick: 3px solid;

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

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

        ul {
            li::before {
                content: ">" / "";
                color: #EC642D;
                font-weight: bold;
                display: inline-block;
                width: 1em;
                margin-left: -1em;
            }

            margin: 0 0 0 20px;
            padding: 0;

            li {
                list-style: none;
                padding-bottom: 10px;
            }
        }
    }

    .module-principles h3,
    .key-ideas-summary h3,
    .lesson-transcript h3,
    .pause-reflect-respond h3 {
        font-size: var(--ai-font-size-heading);
        margin: 0 0 1rem 0;
    }

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

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

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

    .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;
    }

    .pullout-quote .quote {
        grid-column: 2;
        grid-row: 1 / 3;
        padding: 20px 30px 20px 20px;
    }

    .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;
    }

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

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

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

    .steplab-table th,
    .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;
    }

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

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

    /* Lesson Plan Table Variant */
    .lesson-plan .steplab-table {
        border-color: var(--ai-color-dark-grey);
    }

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

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

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

    .transcript-image {
        /* Markdown editor inserts image within a `p` tag*/
        p {
            margin: 0;
            padding: 0;
        }

        border: var(--ai-border-thick) var(--ai-color-dark-blue);
        padding: 1rem;
    }

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

    .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;
    }

    /* ------ RESPONSIVE STYLES ------ */

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

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

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

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

        .steplab-table tr {
            margin-bottom: 1rem;
            border: none;
        }
    }
}
/* END */

.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;
}