/* the editor of the text of a contract: the text on the left, the sheet of paper with the letterhead on the right */
/* One file for one part of the application: a change of that part touches only this file. */
.ce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (min-width: 1100px) {
  .ce {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ce-view {
    position: sticky;
    top: 12px;
  }
}
.ce-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ce-text {
  width: 100%;
  min-height: 62vh;
  font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.35;
  resize: vertical;
}
.ce-preview {
  max-height: 80vh;
  overflow: auto;
  padding: 6px;
}
/* the sheet is paper: white with black text in the light and the dark look alike */
.ct-sheet {
  background: #fff;
  color: #000;
  width: min(100%, 210mm);
  min-height: 70vh;
  margin: 0 auto;
  padding: 10mm 14mm 8mm;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.28;
  display: flex;
  flex-direction: column;
}
.ct-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--accent-line, #1f4e8c);
  margin-bottom: 14px;
}
.ct-sheet-head img {
  height: 11mm;
  width: auto;
  display: block;
}
.ct-sheet-who {
  text-align: right;
  display: flex;
  flex-direction: column;
  font-size: 9pt;
}
.ct-sheet-who small {
  font-size: 8pt;
  color: #595959;
}
.ct-sheet-body {
  flex: 1;
}
.ct-sheet-body p {
  margin: 0 0 6pt;
}
.ct-sheet-body .ct-t {
  text-align: center;
  font-size: 14pt;
  margin-bottom: 12pt;
}
.ct-sheet-body .ct-c {
  text-align: center;
}
.ct-sheet-body .ct-h {
  margin-top: 12pt;
}
.ct-sheet-body .ct-blank {
  margin: 0;
}
.ct-sheet-body .ct-hang {
  padding-left: calc(var(--ind, 0pt) + var(--hang, 0pt));
  text-indent: calc(-1 * var(--hang, 0pt));
}
.ct-mk {
  display: inline-block;
  width: var(--hang, 0pt);
  text-indent: 0;
}
.ct-pg {
  border: 0;
  border-top: 1px dashed #999;
  margin: 12pt 0;
}
.ct-sheet-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 6px;
  border-top: 1px solid #bfbfbf;
  font-size: 8pt;
  color: #595959;
}
/* paper stays paper in every look (the crystal and the dark one do not tint it) */
.ct-sheet,
.ct-sheet .ct-sheet-body p,
.ct-sheet .ct-sheet-body b,
.ct-sheet .ct-sheet-who b {
  color: #000 !important;
  opacity: 1 !important;
}
.ct-sheet {
  background: #fff !important;
}
.ct-sheet .ct-sheet-who small,
.ct-sheet .ct-sheet-foot {
  color: #595959 !important;
}
/* the check box with its words on one line, the box not too big */
.lh-chk {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.lh-chk input[type='checkbox'] {
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none;
}
.ce-number {
  max-width: 360px;
}
/* the editor: find and replace, the count, the side with the preview and Johny */
.ce-find {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ce-find input {
  flex: 1 1 140px;
  min-width: 0;
}
.ce-count {
  margin: 0;
}
.ce-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 1100px) {
  .ce-side {
    position: sticky;
    top: 12px;
  }
  .ce-side .ce-view {
    position: static;
  }
}
.ce-live-out {
  max-height: 46vh;
  overflow: auto;
}
.ce-live-answer {
  white-space: pre-wrap;
  line-height: 1.5;
}
/* the look of the paper of a firm: the groups of the fields */
.lh-group {
  border: 1px solid var(--line, rgba(128, 128, 128, 0.3));
  border-radius: 14px;
  padding: 10px 14px 14px;
  margin: 0 0 12px;
}
.lh-group legend {
  font-weight: 700;
  padding: 0 8px;
}
.lh-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 16px;
  align-items: end;
}
.lh-fields .wide {
  grid-column: 1 / -1;
}
.lh-colour input[type='color'] {
  width: 100%;
  height: 44px;
  padding: 2px;
  cursor: pointer;
}
.lh-num input {
  width: 100%;
}
.ct-sheet-body p {
  margin-bottom: var(--after, 6pt);
}
/* the letterhead: the fields on the left, the sheet that follows them on the right */
.lh-layout {
  display: grid;
  gap: 16px;
}
@media (min-width: 1200px) {
  .lh-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
  .lh-view {
    position: sticky;
    top: 12px;
  }
}
.ct-sheet-foot > span {
  white-space: nowrap;
}
.ct-sheet-foot > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}