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);
}

.full-bleed {
  position: relative;
  left: -1cm;
  width: calc(100% + 2cm);
  padding: 0cm 1cm 0.5cm 1cm;
  box-sizing: border-box;
}

.dark {
  background-color: black;
}

.light {
  background-color: white;
}

.transparent {
  background-color: transparent;
}

@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;
  }
}