.xcmsCanvas .xelement {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

/* Pointer assigned to all elements with onclick */
.click-pointer {
    cursor: pointer;
}

.xcmsCanvas .xbutton {
    margin-top: 20px;
    cursor: pointer;
}

/* Images */
.ximage>img {
    width: 100%;
}

/* Audio */
audio {
    width: 70%;
}

/* Text default styles */
.xtext {
    margin-left: 10px;
    margin-right: 10px;
}

.xtext p {
    margin-bottom: 0;
}

.xtext blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

/* Text alignment */
.xtext .ql-align-right {
    text-align: right;
}

.xtext .ql-align-center {
    text-align: center;
}

.xtext .ql-align-justify {
    text-align: justify;
}

/* XCONTAINER */
.xcontainer {
    padding: 0px;
    position: relative;
}

/* Border for empty containers and make them bigger so they are visible */
.xcontainer:empty {
    border: dashed 1px;
    border-color: #e0e0e0;
    padding-bottom: 50px;
}


/* Element positions */
.xpos-fluid {
    display: grid;
}

.xpos-left {
    display: flex;
    justify-content: left;
}

.xpos-center {
    display: flex;
    justify-content: center;
}

.xpos-right {
    display: flex;
    justify-content: right;
}

/* File thumbnails */
.xelement .thumbnail-none {}

.xelement .thumbnail-icon {}

.xelement .thumbnail-small {
    width: 80px !important;
    /* height: 100px; */
}

.xelement .thumbnail-medium {
    width: 200px !important;
    /* height: 100px; */
}

.thumbnail-large {
    width: 400px !important;
    /* height: 100px; */
}