.atto_image_preview {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.atto_image_preview_box {
    max-height: 150px;
    margin-bottom: 1em;
    overflow: auto;
}

.editor_atto_content img {
    cursor: pointer;
}

.atto_image_button_text-top {
    vertical-align: text-top;
    margin: 0 0.5em;
}

.atto_image_button_middle {
    vertical-align: middle;
    margin: 0 0.5em;
}

.atto_image_button_text-bottom {
    vertical-align: text-bottom;
    margin: 0 0.5em;
}

.atto_image_button_text-top.img-fluid,
.atto_image_button_middle.img-fluid,
.atto_image_button_text-bottom.img-fluid {
    /* If the image is display: block then linking the image to URLs won't work. */
    display: inline-block;
    max-width: calc(100% - 1em);
}

/*rtl:begin:ignore*/
.atto_image_button_left {
    float: left;
    margin: 0 0.5em 0 0;
    max-width: calc(100% - 1em);
}

.atto_image_button_right {
    float: right;
    margin: 0 0 0 0.5em;
    max-width: calc(100% - 1em);
}
/*rtl:end:ignore*/