html, body {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serifsans-serif, sans-serif;
    background: #f6f8f9;
    padding: 0;
    margin: 0;
}

@page {
    @top-left {
        content: element(topLeftMarginBoxRunning);
    }

    @top-center {
        content: element(topCenterMarginBoxRunning);
    }

    @top-right {
        content: element(topRightMarginBoxRunning);
    }

    @bottom-left {
        content: element(bottomLeftMarginBoxRunning);
    }

    @bottom-center {
        content: element(bottomCenterMarginBoxRunning);
    }

    @bottom-right {
        content: element(bottomRightMarginBoxRunning);
    }
}

.topLeftMarginBox {
    position: running(topLeftMarginBoxRunning);
}

.topCenterMarginBox {
    position: running(topCenterMarginBoxRunning);
}

.topRightMarginBox {
    position: running(topRightMarginBoxRunning);
}

.bottomLeftMarginBox {
    position: running(bottomLeftMarginBoxRunning);
}

.bottomCenterMarginBox {
    position: running(bottomCenterMarginBoxRunning);
}

.bottomRightMarginBox {
    position: running(bottomRightMarginBoxRunning);
}


.no-break {
    break-inside: avoid;
}

.page-number-total:before{
    content: counter(pages);
}

.page-number-current:before {
    content: counter(page);
}

.pagedjs_page {
    background: white;
}

.pagedjs_margin-top {
    border-bottom: 1px solid gray;
}

.pagedjs_margin-bottom {
    border-top: 1px solid gray;
}

@media screen {
    .pagedjs_pages {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagedjs_page {
        border: 1px solid #d6d9dc;
        border-radius: 5px;
        margin: 1.5rem;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1rem;
    }
}

@media print {
    #root {
        display: none;
    }

    #preview {
        display: block;
    }

    * {
        print-color-adjust: exact;
    }
}