/*
 * The texts written in sing (Веб страна): what CKEditor writes - aligned / resized images and their captions, tables,
 * quotes, text sizes, highlights, embedded videos - looks on the site as it did in the editor. Only inside .cms-body
 * (the wrapper of every written text: pages, intros, home page sections, news), so the rest of the site is untouched.
 * Bootstrap 5 classes written into the text (row, col-md-6, card, btn, alert, table ...) work as everywhere on the site.
 */

.cms-body::after {
    content: "";
    display: table;
    clear: both;
}

.cms-body img {
    max-width: 100%;
    height: auto;
}

/* images */
.cms-body figure.image {
    display: table;
    clear: both;
    text-align: center;
    margin: .9em auto;
    min-width: 50px;
}

.cms-body figure.image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 100%;
    height: auto;
}

.cms-body .image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}

.cms-body .image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}

.cms-body figure.image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

.cms-body figure.image.image_resized img {
    width: 100%;
}

.cms-body figure.image.image_resized > figcaption {
    display: block;
}

.cms-body img.image_resized {
    height: auto;
}

.cms-body figure.image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    padding: .6em;
    font-size: .875em;
    color: var(--si-gray-600, #6c757d);
}

.cms-body .image-style-side {
    float: right;
    margin-left: 1.5em;
    max-width: 50%;
}

.cms-body .image-style-align-left {
    float: left;
    margin-right: 1.5em;
}

.cms-body .image-style-align-right {
    float: right;
    margin-left: 1.5em;
}

.cms-body .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

.cms-body .image-style-align-left,
.cms-body .image-style-align-right {
    clear: none;
}

.cms-body .image-style-block-align-left,
.cms-body .image-style-block-align-right {
    max-width: calc(100% - 1.5em);
}

.cms-body .image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

.cms-body .image-style-block-align-right {
    margin-right: 0;
    margin-left: auto;
}

.cms-body p + .image-style-align-left,
.cms-body p + .image-style-align-right,
.cms-body p + .image-style-side {
    margin-top: 0;
}

.cms-body .image-inline.image-style-align-left,
.cms-body .image-inline.image-style-align-right {
    margin-top: .75em;
    margin-bottom: .75em;
}

/* tables: a table without the site's classes still gets lines and room */
.cms-body figure.table {
    display: table;
    width: 100%;
    margin: .9em auto;
    overflow-x: auto;
}

.cms-body figure.table > table,
.cms-body table:not(.table) {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.cms-body table:not(.table) td,
.cms-body table:not(.table) th {
    min-width: 2em;
    padding: .5rem .75rem;
    border: 1px solid var(--si-border-color, #e2e5f1);
}

.cms-body table:not(.table) th {
    font-weight: 700;
    background-color: var(--si-secondary, #eff2fc);
}

.cms-body figure.table > figcaption {
    display: table-caption;
    caption-side: top;
    padding: .6em;
    text-align: center;
    font-size: .875em;
}

/* quotes, rules, code */
.cms-body blockquote:not(.blockquote) {
    overflow: hidden;
    padding: .25em 1.5em;
    margin: 1em 0;
    font-style: italic;
    border-left: 4px solid var(--si-primary, #002f57);
}

.cms-body hr {
    margin: 1.5rem 0;
}

.cms-body pre {
    padding: 1em;
    white-space: pre-wrap;
    border-radius: .375rem;
    background-color: var(--si-secondary, #eff2fc);
}

.cms-body .page-break {
    display: none;
}

/* text sizes and highlights of the editor */
.cms-body .text-tiny {
    font-size: .7em;
}

.cms-body .text-small {
    font-size: .85em;
}

.cms-body .text-big {
    font-size: 1.4em;
}

.cms-body .text-huge {
    font-size: 1.8em;
}

.cms-body .marker-yellow {
    background-color: #fdfd77;
}

.cms-body .marker-green {
    background-color: #62f962;
}

.cms-body .marker-pink {
    background-color: #fc7899;
}

.cms-body .marker-blue {
    background-color: #72ccfd;
}

.cms-body .pen-red {
    color: #e71313;
    background-color: transparent;
}

.cms-body .pen-green {
    color: #128a00;
    background-color: transparent;
}

/* embedded videos (the editor writes the player into the text) */
.cms-body figure.media {
    clear: both;
    margin: .9em 0;
    display: block;
    min-width: 15em;
}

.cms-body figure.media iframe {
    max-width: 100%;
}

/* lists with checkboxes */
.cms-body .todo-list {
    list-style: none;
    padding-left: 0;
}

.cms-body .todo-list li input[type="checkbox"] {
    margin-right: .5em;
}