<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Static Template</title>

    <style>
      @media print {
        html,
        body,
        .main,
        .tabs,
        .tabbed-content {
          float: none;
        }

        html {
          font-family: "Circular Std", sans-serif;
        }

        body {
          color: black;
          background: white;
          margin: 0;
        }

        .title {
          font-size: 30px;
        }

        p {
          font-size: 12px;
          margin: 0;
        }

        .key-behavior-text {
          margin: 1rem 0;
          font-size: small;
          text-align: right;
          vertical-align: top;
          height: 20px;
        }

        .page {
          position: relative;
          max-width: 100%;
          margin: 0;
          height: 100%;
          width: 100%;
          float: none;
        }

        .header-blueSection {
          position: relative;
          width: 100%;
          height: 560px;
        }

        .header-logo {
          position: absolute;
          top: 8vh;
          right: 8vw;
          max-width: 200px;
          max-height: 100px;
          height: auto;
          z-index: 9999;
        }
        .header-background {
          position: absolute;
          width: 100%;
          max-width: 100%;
          max-height: 560px;
          height: auto;
        }

        .header-blueSection div {
          position: absolute;
          bottom: 0;
          color: white;
          font-style: normal;
          margin: 1rem 3rem;
        }

        .header-blueSection div p {
          font-weight: bold;
          font-size: 18px;
        }

        .header-blueSection div p:first-child {
          font-size: 46px;
          margin-bottom: 0.5rem;
        }
        .header-data {
          height: 175px;
          margin-top: 200px;
          padding: 8vw;

          color: #1c2323;
        }
        .name {
          text-transform: uppercase;
          letter-spacing: -0.02em;
          font-size: 42px;
        }
        .org {
          font-size: 26px;
        }
        .assesedDate {
          font-size: 20px;
        }
        .header-footer {
          width: 90%;
          text-align: center;
          max-width: 100%;
          max-height: 100px;
          height: auto;
          display: block;
          margin: 0 auto;
          margin-bottom: 100px;
        }

        .competency-header {
          position: relative;
          max-width: 100%;
          max-height: 300px;
          height: auto;
        }

        .competency-header-text {
          position: absolute;
          top: 1125px;
          padding: 2rem 8vw;
        }

        .competency-header-text p {
          color: #fafafa;
          font-size: 0.8rem;
          letter-spacing: 0.08rem;
          line-height: 1.2;
          font-weight: bold;
          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        }

        .competency-header-text p:last-child {
          margin-top: 1rem;
        }

        .competency-section {
          position: absolute;
          top: 1425px;
          width: 100%;
          padding: 0 3rem;
        }

        .competency-data {
          height: 80px;
        }

        .competency-card {
          width: 65%;
          background-color: #f7fcfa;
          border-radius: 8px;
          margin-right: 1rem;
          box-sizing: content-box;
          letter-spacing: 1px;
        }

        .competency-card-weakness {
          border: 2px solid #d28f97;
          box-shadow: 0px 6px 72px rgba(28, 57, 101, 0.12);
        }

        .competency-card-strenght {
          border: 2px solid #8fd2b2;
          box-shadow: 0px 6px 72px rgba(28, 57, 101, 0.12);
        }

        .competency-image {
          height: 40px;
          width: 80px;
          max-width: 100%;
          max-height: 40px;
          height: auto;
          display: block;
          margin: auto;
          margin-top: 25%;
        }

        .competency-mark {
          vertical-align: top;
          outline: none;
        }

        .personality-assesment {
          position: absolute;
          top: 2125px;
        }

        .personality-assesment-header {
          max-width: 100%;
          max-height: 300px;
          height: auto;
        }

        .personality-assesment-header-text {
          position: absolute;
          font-weight: 500;
          top: 0px;
          padding: 2rem 8vw;
          color: white;
          letter-spacing: 0.08rem;
          line-height: 1.2;
        }

        .personality-assesment-header-text p:first-child {
          font-weight: 500;
          margin-bottom: 2rem;
        }
        .personality-assesment-header-text p:last-child {
          font-size: medium;
        }

        .ways-to-develop-section {
          position: absolute;
          top: 2625px;
        }

        .ways-to-develop-header {
          max-width: 100%;
          width: 100%;
          height: 300px;
        }

        .ways-to-develop-header-text {
          box-sizing: content-box;
          position: absolute;
          top: 0px;
          width: 90%;
          margin: 1.5rem 3rem;
          color: white;
        }

        .ways-to-develop-header-text p:not(:first-child) {
          font-size: medium;
          letter-spacing: 0.08rem;
          line-height: 1.2;
        }

        .ways-to-develop-header-text p:first-child {
          font-weight: 500;
          margin-bottom: 2rem;
        }

        .ways-to-develop-header-text p:last-child {
          margin-top: 2rem;
        }

        .ways-to-develop-card {
          width: 90%;
          background: #ffffff;
          border: 2px solid #ffffff;
          box-shadow: 0px 6px 72px rgba(28, 57, 101, 0.12);
          border-radius: 8px;
          box-sizing: content-box;
          padding: 0.5rem;
        }

        .way-to-develop-text {
          font-size: 9px;
          letter-spacing: 0.08rem;
          line-height: 1.2;
          text-align: left;
          color: #1c2323;
          margin-left: 1rem;
        }

        .personality-section {
          padding: 0 3rem;
        }

        .column {
          display: table-cell;
          vertical-align: middle;
          float: left;
          width: 45%;
        }

        .row:after {
          content: "";
          display: table;
          clear: both;
        }

        .personality-data {
          height: 130px;
        }

        .personality-card {
          width: 40%;
          background: #f9f9f9;
          border: 1px solid #ebebeb;
          box-shadow: 0px 6px 72px rgba(28, 57, 101, 0.12);
          border-radius: 30px;
          padding: 0.5rem;
          margin-right: 2rem;
          margin-top: 1.5rem;
          box-sizing: content-box;
        }

        .personality-meaning {
          font-size: small;
          color: #1c2323;
        }
        .personality-meaning h3 {
          color: #657c7c;
        }
        .personality-image {
          max-height: 40px;
          max-width: 40px;
          height: auto;
        }
        .personality-result {
          box-sizing: border-box;
          color: #52b77a;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding: 0.2rem;

          background: rgba(82, 183, 122, 0.06);
          border: 2px solid #52b77a;
          border-radius: 8px;
        }
        .progress-bar-container {
          width: 100%;
          box-sizing: content-box;
          height: 10px;
          background: #e1e1e1;
        }
        .progress-bar {
          display: block;
          height: 100%;
          background-color: #00c3cd;
          border-radius: 3px;
          transition: width 500ms ease-in-out;
          filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        }

        .practical-tips-section {
          position: absolute;

          width: 100%;
          background: linear-gradient(180deg, #00c3cd 0%, #01b5ad 100%);
        }

        .practical-tips-header {
          max-width: 100%;
          width: 100%;
          height: 220px;
        }

        .practical-tips-header-text {
          position: absolute;
          top: 0px;
          padding: 2rem 8vw;
          color: white;
          font-weight: bold;
        }

        .practical-tips-header-text p:first-child {
          font-size: xx-large;
        }

        .practical-tips-header-text p:last-child {
          margin-top: 2rem;
          font-size: small;
        }

        .practical-tips-wrapper {
          padding: 2rem;
          width: 100%;
          height: 900px;
          background: linear-gradient(180deg, #00c3cd 0%, #01b5ad 100%);
        }

        .practical-tips-card {
          background: #fafafa;
          border: 2px solid #29adb4;
          width: 85%;
          box-shadow: 0px 6px 72px rgba(28, 57, 101, 0.12);
          height: 200px;
          margin-top: 0.6rem;
          padding: 0.8rem;
          color: #383f3d;
          border-radius: 30px;
        }

        .practical-tips-card div:first-child > p {
          font-size: x-large;
          font-weight: bold;
          margin-bottom: 0.2rem;
          line-height: 64px;
        }

        .practical-tips-card div:last-child > p {
          font-size: small;
          line-height: 16px;
        }

        .individual-plan-section {
          position: absolute;
          width: 100%;
        }

        .individual-plan-header {
          max-width: 100%;
          width: 100%;
          height: 200px;
        }

        .individual-plan-header-text {
          position: absolute;
          top: 0px;
          padding: 2rem 8vw;
          color: white;
        }

        .individual-plan-header-text > p {
          margin-top: 4rem;
          font-weight: bold;
        }

        .individual-plan-section-wrapper {
          width: 100%;
          padding: 0 2rem;
          background-color: white;
          margin-top: 3rem;
        }

        .ip-row {
          height: 40px;
        }

        .ip-column {
          width: 65%;
          height: 100%;
          background: #d9d9d9;
          color: #c2c2c6;
        }

        .ip-column-text {
          font-weight: bold;
          font-size: medium;
          line-height: 32px;
          padding: 0.5rem;
          color: #c2c2c6;
        }

        .ip-column-first {
          margin-right: 1rem;
          width: 20%;
          height: 100%;
        }

        .ip-column-header {
          font-weight: bold;
          font-size: medium;
          line-height: 32px;
          padding: 0.5rem;
          color: #1c2323;
        }

        .page-footer-section {
          position: absolute;

          width: 100%;
          background-color: #00c3cd;
        }

        .page-footer-header {
          max-width: 100%;
          width: 100%;
          max-height: 500px;
        }

        .page-footer-header-text {
          position: absolute;
          letter-spacing: 1px;
          top: 0px;
          padding: 2rem 8vw;
          color: white;
        }

        .page-footer-header-text > p {
          font-size: xx-large;
        }

        .page-footer-header-text > div {
          margin-top: 8rem;
        }

        .page-footer-header-text > div > p {
          font-size: large;
          font-weight: bold;
          line-height: 24px;
          letter-spacing: 1px;
          padding-right: 3rem;
        }

        .page-footer-header-text > div > p:last-child {
          margin-top: 2rem;
        }

        .page-footer-section-wrapper {
          width: 100%;
          height: 572px;
          padding: 2rem 2rem 0 2rem;
        }

        .page-footer-section-wrapper .column {
          width: 40%;
        }

        .page-footer-text {
          font-size: medium;
          color: black;
          line-height: 16px;
          letter-spacing: 1px;
          color: #383f3d;
        }

        .page-footer-text p {
          margin-top: 2rem;
        }

        .footer-logo {
          position: absolute;
          left: 1rem;
          bottom: 1rem;
          max-width: 250px;
          max-height: 250px;
          height: auto;
        }
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="header-blueSection">
        <img class="header-logo" src="[headerLogo]" alt="header-logo" />
        <img
          class="header-background"
          src="[headerBackground]"
          alt="header-background"
        />
        <div>
          <p>Employee report</p>
          <p>Your personalized, data driven development plan</p>
        </div>
      </div>
      <div class="header-data">
        <p class="name">[name]</p>
        <br />
        <p class="org">[jobRole] at [organization]</p>
        <br />
        <p class="assesedDate">Assessed on [assesedDate]</p>
      </div>
      <img
        class="competency-header"
        src="[competencyHeader]"
        alt="competency-header"
      />
      <div class="competency-header competency-header-text">
        <p>
          This report outlines your work-style preferences based on the
          personality assessment you completed. Your answers have been compared
          to a large group of other people within the workplace. Personality
          assessments describe how a person goes about their work. There is no
          single ‘right’ or ‘wrong’ work style, however, certain work styles are
          better suited to certain jobs.
        </p>
        <p>
          This first page hightlights your likely strengths and development
          areas from the way you responded to the questionnaire.
        </p>
      </div>
      [competencyResults]
      <div class="personality-assesment">
        <div style="position: relative">
          <img
            class="personality-assesment-header"
            src="[personalityAssesmentHeader]"
            alt="personality-assesment-header"
          />
          <div
            class="personality-assesment-header personality-assesment-header-text"
          >
            <p class="title">PERSONALITY ASSESSMENT BREAKDOWN</p>
            <p>
              The following pages present your results for all areas of your
              Thrive behavioural assessment. These are likely to show higher
              scores in the areas you feel most comfortable working in. This
              report shows how you compare with others in the workplace and how
              this is likely to affect your behaviour at work.
            </p>
          </div>
        </div>
        <div>
          <div class="row key-behavior-text" style="width: 100%">
            <p style="text-align: right; padding-right: 3rem">
              A key behaviour selected by [organization]
              <img
                src="templates/marked.png"
                width="15px"
                height="15px"
                style="margin: 8px 0 0 4px"
              />
            </p>
          </div>
          [personalityResults]
        </div>
      </div>
      [waysToDevelop] [practicalTips][individualPlan][pageFooter]
    </div>
  </body>
  <script>
    if (navigator.userAgent.indexOf("Mac") != -1) {
      document.body.style.zoom = 0.753;
    }
    if (navigator.userAgent.indexOf("Win") != -1) {
      console.log("Windows");
    }
  </script>
</html>
