/* The editor and preview share the server-rendered document projection. */
.document-template-designer .template-wysiwyg-projection {
    z-index: 1;
    pointer-events: none;
}

.document-template-designer .template-wysiwyg-projection > .document-template-layout-page {
    display: none;
}

.document-template-designer .template-wysiwyg-page-1 > .document-template-layout-page:nth-of-type(1),
.document-template-designer .template-wysiwyg-page-2 > .document-template-layout-page:nth-of-type(2),
.document-template-designer .template-wysiwyg-page-3 > .document-template-layout-page:nth-of-type(3),
.document-template-designer .template-wysiwyg-page-4 > .document-template-layout-page:nth-of-type(4),
.document-template-designer .template-wysiwyg-page-5 > .document-template-layout-page:nth-of-type(5),
.document-template-designer .template-wysiwyg-page-6 > .document-template-layout-page:nth-of-type(6),
.document-template-designer .template-wysiwyg-page-7 > .document-template-layout-page:nth-of-type(7),
.document-template-designer .template-wysiwyg-page-8 > .document-template-layout-page:nth-of-type(8),
.document-template-designer .template-wysiwyg-page-9 > .document-template-layout-page:nth-of-type(9),
.document-template-designer .template-wysiwyg-page-10 > .document-template-layout-page:nth-of-type(10),
.document-template-designer .template-wysiwyg-page-11 > .document-template-layout-page:nth-of-type(11),
.document-template-designer .template-wysiwyg-page-12 > .document-template-layout-page:nth-of-type(12),
.document-template-designer .template-wysiwyg-page-13 > .document-template-layout-page:nth-of-type(13),
.document-template-designer .template-wysiwyg-page-14 > .document-template-layout-page:nth-of-type(14),
.document-template-designer .template-wysiwyg-page-15 > .document-template-layout-page:nth-of-type(15),
.document-template-designer .template-wysiwyg-page-16 > .document-template-layout-page:nth-of-type(16),
.document-template-designer .template-wysiwyg-page-17 > .document-template-layout-page:nth-of-type(17),
.document-template-designer .template-wysiwyg-page-18 > .document-template-layout-page:nth-of-type(18),
.document-template-designer .template-wysiwyg-page-19 > .document-template-layout-page:nth-of-type(19),
.document-template-designer .template-wysiwyg-page-20 > .document-template-layout-page:nth-of-type(20) {
    display: block;
}

.document-template-designer .template-page.has-wysiwyg-projection.show-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(to right, rgba(0, 66, 119, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 66, 119, .10) 1px, transparent 1px);
    background-size: var(--template-grid-size, 14.61px) var(--template-grid-size, 14.61px);
    pointer-events: none;
}

.document-template-designer .template-canvas-interaction-layer {
    z-index: 3;
}

.document-template-designer .template-canvas-interaction-layer .template-canvas-element {
    overflow: visible;
    border-color: transparent;
    padding: 0;
    background: transparent !important;
    color: transparent !important;
    box-shadow: none;
}

.document-template-designer .template-canvas-interaction-layer .template-canvas-element > :not(.template-canvas-resize) {
    opacity: 0;
    pointer-events: none;
}

.document-template-designer .template-canvas-interaction-layer .template-canvas-element:hover {
    border-color: rgba(0, 66, 119, .52);
    background: transparent !important;
    box-shadow: 0 0 0 1px rgba(0, 66, 119, .16);
}

.document-template-designer .template-canvas-interaction-layer .template-canvas-element.selected {
    z-index: var(--template-element-z-index) !important;
    border-color: #004277;
    background: transparent !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
}

.document-template-designer .template-canvas-interaction-layer .template-canvas-element.multi-selected:not(.selected) {
    border-color: #14804a;
    background: transparent !important;
}

.document-template-designer .template-canvas-interaction-layer .template-canvas-element.dragging {
    z-index: 40 !important;
    border-color: #004277;
    background: transparent !important;
    box-shadow: 0 5px 14px rgba(0, 43, 77, .18);
}

.document-template-designer .template-page.generated-continuation .template-margin-guide,
.document-template-designer .template-page.generated-continuation .template-margin-label,
.document-template-designer .template-page.generated-continuation .template-page-zone,
.document-template-designer .template-page.generated-continuation .template-page-number-preview {
    display: none;
}

.document-template-designer .template-page-content.generated-continuation {
    z-index: 6;
    pointer-events: none;
}

.document-template-designer .template-page-content.generated-continuation > :not(.template-generated-continuation-badge) {
    display: none !important;
}

.document-template-designer .template-generated-continuation-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 8;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #9fb2c3;
    border-radius: 3px;
    padding: 3px 7px;
    background: rgba(255, 255, 255, .94);
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .12);
}

.document-template-designer .template-generated-continuation-badge .material-symbols-outlined {
    color: #075985;
    font-size: 15px;
}