scss:
  html {
    overflow: hidden;
    font-family: Helvetica, Arial;
  }

  .addressee {
    width: 50%;
    float: left;
  }

  .letter {
    margin: auto;
    width: 960px;

    p, ul, ol, dl, li, h3 {
      font-size: 1em;
    }

    p {
      padding: 0;
      line-height: 1.2em;
      margin: .4rem 0;
    }
  }

  @media print {
    .letter {
      margin: 0 20px;
      padding: 0;
      font-size: 0.8em;
      width: auto;
    }
  }

  .header {
    .unit-info p {
      margin-top: 0;
      text-transform: uppercase;
    }

    .description-block {
      margin: 20px 0 30px 0;

      .description {
        font-weight: bold;
      }
    }

    .unit-block {
      width: 50%;
      float: right;

      text-align: right;

      .trust-name {
        padding: 0;

        p {
          font-size: 1.4em;
          font-weight: bold;
          vertical-align: bottom;
          margin: 0;
          padding: 0;
        }
      }

      .trust-caption {
        padding: 0;

        p {
          font-size: 1em;
          font-weight: bold;
          margin-top: .1rem;
          color: #005EB8; // NHS blue
        }
      }

      .nhs-logo {
        // height: 33px; The height of the logo now determines the element height
        padding: 0;
        margin: 0 0 .4rem 0;
        display: inline-block;
        vertical-align: bottom;
      }

      .site-info-html p {
        font-size: 0.7em;
      }
    }

    .private {
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .address {
      margin: 20px 0 20px 0;
    }
  }

  .body {
    clear: both;
    padding-top: 10px;

    .salutation {
      margin: 30px 0;
    }

    .patient-status {
      font-weight: bold;
      text-decoration: underline;
      margin: 10px 0;
    }

    .list {
      margin-bottom: 5px;

      h3 {
        font-size: 0.9em;
        font-weight: bold;
        margin-bottom: 0;
        margin-top: 0;
      }

      ul {
        padding-left: 20px;
        margin-top: 0.4rem;
        margin-bottom: 7px;
      }

      ol {
        list-style-type: lower-latin;
        font-size: 0.9em;
        margin-bottom: 0;
        margin-left: 0;
        padding-left: 30px;
      }

      li {
        line-height: 1.2em;
        font-size: 0.9rem;
      }

      span, p {
        font-size: 0.9rem;
      }
    }

    .problems {
      width: 50%;
      float: left;
    }

    .allergies {
      margin-bottom: 1rem;

      h3 {
        padding-right: 1rem;
      }

      h3, p {
        display: inline;
      }

      ul {
        list-style-type: none;
        margin: 0.5rem 0 0;
        padding: 0;
        display: inline;

        li {
          display: inline;
          margin-right: 1rem;

          &::before {
            content: "\2022";
            padding-right: 0.2rem;
          }
        }
      }
    }

    .prescriptions {
      width: 50%;
      float: right;

      .prescription {
        font-weight: normal;

        &.recently_changed {
          font-weight: bold;
        }
      }
    }

    .observations {
      clear: both;
    }

    .investigations {
      clear: both;

      span {
        white-space: nowrap;
      }
    }

    ul.inline {
      display: block;
      padding: 0;
      margin: 0;

      li {
        display: inline;
        padding-right: 15px;
      }
    }

    .message {
      margin-top: 30px;
      margin-bottom: 20px;

      p {
        margin-bottom: 15px;
      }
    }

    .electronic-signature {
      margin-bottom: 40px;
    }

    .author-signature {
      .author-name {
        font-weight: bold;
      }
      margin-bottom: 20px;
    }
  }

  .footer {
    .ccs {
      .electronic {
        list-style-type: none;
        list-style-position: outside;
        margin: 0;
        padding: 0;

        li {
          margin-bottom: .2rem;
        }
      }

      h3 {
        font-size: 1em;
        margin: 1rem 0;
        margin-bottom: 4rem;
      }

      p.private {
        margin: 1rem 0;
      }

      .address {
        margin-bottom: 6rem;
      }
    }
  }

  div.alwaysbreak { page-break-before: always; }
  div.nobreak:before { clear:both; }
  div.nobreak { page-break-inside: avoid; }

.letter
  .header
    .addressee
      .unit-info
        p= letter.letterhead.unit_info

      .description-block
        p
          = l letter.issued_on
          br
          span.description= letter.description
          br
          = letter.event_description

      .private
        p Private and confidential

      .address
        p
          = letter.main_recipient.to_html
          - email_statement = letter.main_recipient.statment_to_indicate_letter_will_be_emailed
          - if email_statement.present?
            br
            = email_statement

    .unit-block
      span.nhs-logo
            = image_tag(wicked_pdf_asset_base64("renalware/nhs_a4_letter_logo_black.png"))
      .trust-name
        p= raw letter.letterhead.trust_name
      .trust-caption
        p= letter.letterhead.trust_caption

      .site-info-html
        = raw letter.letterhead.site_info

  .body
    .salutation
      p= letter.salutation

    .patient-status
      p= render "patient_summary", patient: letter.patient

    = render letter.parts, patient: letter.patient, letter: letter

    .message
      = letter.body&.html_safe

    p Yours sincerely

    .signature.nobreak
      .electronic-signature
        p= letter.signature

      .author-signature
        p
          span.author-name= letter.author.signature
          br
          = letter.author.professional_position

  .footer
    .ccs
      h3 cc:

      ul.electronic
        - letter.electronic_cc_recipients.each do |user|
          li= user.professional_signature

      p.private Private and confidential

      - letter.cc_recipients.each do |cc|
        .address.nobreak
          p
            = cc.to_html
            - if cc.statment_to_indicate_letter_will_be_emailed.present?
              br
              = cc.statment_to_indicate_letter_will_be_emailed