[class^="el-"] {
    display: block;
    box-sizing: border-box;
    page-break-inside: avoid;
    break-inside: avoid;
    width: 100%;
}

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

.text-left {
    text-align: left;
}

.el-image {
    width: 100%;
    height: 100%;
    max-width: unset;
    max-height: unset;
}

.el-image-placeholder .img-upload-wrapper {
    display: flex !important;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
 
}

.el-family-signature-border-top {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
}

/* Inactive: like the active editor below (.span-pair-rich-inline), the second half hugs its text at
   the right edge, capped at half the width, with its lines starting at the same left edge. Unlike
   the editor, the first half isn't capped at 50% and takes whatever the second half leaves. */
.el-birth-death-date-inline {
    display: flex;
    justify-content: center;
}

.el-birth-death-date-inline > span {
    display: inline;
    flex: 1 1 0;
}

.el-birth-death-date-inline > span:first-child,
.span-pair-rich-inline > .span-pair-first {
    text-align: left;
    padding-left: 3pt;
}

.el-birth-death-date-inline > span:last-child {
    flex: 0 1 auto;
    max-width: 50%;
    box-sizing: border-box;
    text-align: left;
    padding-right: 3pt;
}

.span-pair-rich-inline > .span-pair-second {
    padding-right: 3pt;
}

.span-pair-rich-inline > .span-pair-second .ProseMirror {
    width: fit-content;
    margin-left: auto;
    text-align: left;
}

/* Active: SpanPairRichEditor layout classes */
.span-pair-rich-inline {
    display: flex;
    justify-content: center;
    width: 100%;
}

.span-pair-rich-inline > * {
    flex: 1 1 0;
}

.span-pair-rich-stacked {
    display: flex;
    flex-direction: column;
    width: 100%;
}