/* CKEditor5
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */

 :root {
    --ck-z-modal: 100000 !important;
    --ck-image-style-spacing: 1.5em;
}

 .image.image_resized {
    max-width: 100%;
    /*
        The `<figure>` element for resized images must not use `display:table` as browsers do not support `max-width` for it well.
        See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
        Fortunately, since we control the width, there is no risk that the image will look bad.
    */
    display: block;
    box-sizing: border-box;
}

.image.image_resized > img {
    /* For resized images it is the `<figure>` element that determines the image width. */
    width: 100%;
}

.image.image_resized > figcaption {
    /* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
    display: block;
}

.image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%;
}

.image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
}

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

.image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}

/*
 * Override the width of the table set by Bootstrap content styles.
 * See: https://github.com/ckeditor/ckeditor5-table/issues/154.
 */
.ck-content .table {
    width: auto;
}

#body .ck-editor__editable {
    min-height: 250px;
}

.ck.ck-editor {
    padding: 20px 0px !important;
}


/* Make Youtube embeds visible */
.media {
    display: block !important;
}