html, body {
  margin: 0;
  padding: 0;
}

:root {
  font-family: Montserrat;
  font-size: 1.2rem;
  --color-primary: #283a54;
}

.flex {
  display: flex;
}

.row {
  flex-direction: row;
}

.content {
  display: contents;
}

.page-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.page-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 3.2rem 3.2rem 0 3.2rem;
}

.letter-content {
  margin-bottom: 1rem;
}

p {
  margin-top: 0;
  line-height: 1.5;
  text-align: justify;
}

.appendix-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

.appendix-start {
  margin-top: 0.5rem;
}

#content-outlet {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field-line {
  text-align: left;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.fee-adjustment-lines {
  margin-top: 0.25rem;
}

.fee-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.fee-label {
  flex: 0 0 30rem;
}

.fee-amount {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  flex-shrink: 0;
}

.fee-amount .fill-line.med:not(:empty) {
  width: auto;
  min-width: 8rem;
}

.fill-line {
  display: inline-block;
  border-bottom: 1px solid #000;
  height: 1.1rem;
}

.fill-line.short { width: 16rem; }
.fill-line.med   { width: 18rem; }
.fill-line.grow  { flex: 1; }

.fill-line:not(:empty) {
  border-bottom: none;
  height: auto;
}

p.fill-line.full:not(:empty) {
  border-bottom: none;
  margin-bottom: 0.75rem;
}

p.fill-line.full {
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
  height: 1.4rem;
  margin-bottom: 1.1rem;
}

.signature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
  row-gap: 0.75rem;
  margin-top: 1rem;
}

.sig-party {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.signature-group-fill-in {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 100%;
}

.sig-label {
  flex: 0 0 5.75rem;
  padding-bottom: 0.1rem;
}

.signature-group-fill-in .fill-in,
.signature-group-fill-in .signature-line {
  flex: 1;
  min-height: 1.25rem;
  font-size: 1.2rem;
  line-height: 1.25rem;
}

.signature-row-signature {
  min-height: 3rem;
}

.signature-row-signature .fill-in,
.signature-row-signature .signature-line {
  display: flex;
  align-items: flex-end;
}

.show-fill-lines .fill-in,
.show-fill-lines .signature-line {
  border-bottom: 1px solid #000;
}

.signature-row-signature.show-fill-lines .fill-in,
.signature-row-signature.show-fill-lines .signature-line {
  border-bottom: 1.5px solid #000;
}

.signature-row-signature img {
  height: 3rem;
  display: block;
}

footer {
  margin-top: auto;
  page-break-before: auto;
  page-break-inside: avoid;
}

.footer-container {
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 2%;
}

.footer-left {
  justify-content: left;
  align-items: center;
  min-width: 50%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.footer-right {
  justify-content: right;
  align-items: center;
  min-width: 50%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.csa-logo-container {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.csa-cpy-txt {
  font-size: .665rem;
  margin-top: -0.3rem;
}