@medicus.ai/medicus-report-pdf-generator 1.3.13 → 1.3.15

package/assets/sanusx/css/sanusx_report.css

@@ -1,708 +1,708 @@
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 100;
-    src: url('../fonts/Roboto-Light.ttf');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    src: url('../fonts/Roboto-Regular.ttf');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: bold;
-    src: url('../fonts/Roboto-Bold.ttf');
-}
-
-
-@font-face {
-    font-family: 'FrankRuhlLibre';
-    font-style: normal;
-    font-weight: 100;
-    src: url('../fonts/FrankRuhlLibre-Regular.ttf')
-}
-
-@font-face {
-    font-family: 'FrankRuhlLibre';
-    font-style: normal;
-    font-weight: 300;
-    src: url('../fonts/FrankRuhlLibre-Regular.ttf')
-}
-
-@font-face {
-    font-family: 'Frank Ruhl Libre';
-    font-style: normal;
-    font-weight: 600;
-    src: url('../fonts/FrankRuhlLibre-Bold.ttf')
-}
-
-@font-face {
-    font-family: 'Frank Ruhl Libre';
-    font-style: normal;
-    font-weight: bold;
-    src: url('../fonts/FrankRuhlLibre-Bold.ttf')
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    /* background: url('../images/A4.png');*/
-    background-repeat: no-repeat;
-    background-size: 211mm;
-    background-position: center top;
-    box-sizing: border-box;
-    width: 210mm;
-    height: 297mm;
-    MARGIN: AUTO;
-    font-family: 'Open Sans', sans-serif;
-    background-color: #f8f8f3;
-}
-
-html {
-    background: unset;
-    height: 100%;
-    scroll-behavior: smooth;
-}
-
-body {
-    position: relative;
-    font-family: 'Open Sans', sans-serif;
-}
-
-header {
-    min-height: 38px;
-    padding: 3.143em 3.571em 0;
-}
-
-.content {
-    width: 100%;
-    float: left;
-    margin-top: 29px;
-    padding: 0px 36px 0 27px;
-    box-sizing: border-box;
-    direction: ltr;
-}
-
-img {
-    width: 100%
-}
-
-/*Header*/
-.report-header {
-    color: rgba(51, 51, 51, 1);
-    font-size: 23.5px;
-    margin-bottom: 20px;
-    letter-spacing: -0.9px;
-    display: inline-block;
-    margin-top: 0;
-    font-family: Open Sans;
-    line-height: 34px;
-    letter-spacing: -0.9px;
-}
-
-.report-logo {
-    display: inline-block;
-    float: left;
-    margin-right: 6px;
-}
-
-.report-logo img {
-    width: 84px;
-    display: inline-block;
-    margin-left: 6px;
-}
-
-.avatar-img {
-    width: 113px;
-    display: inline-block;
-    float: left;
-    margin-right: 10px;
-}
-
-.avata-info {
-    float: left;
-    margin-top: 30px;
-    width: 56%;
-}
-
-.avatar-title {
-    font-family: 'Roboto';
-    font-size: 17.5px;
-}
-
-.hero-title {
-    color: #005651;
-    font-family: 'Frank Ruhl Libre';
-    font-size: 16px;
-}
-
-.avatar-main-info {
-    float: left;
-    width: 39%;
-}
-
-.avatar-desc {
-    width: 61%;
-    float: left;
-    font-family: 'Roboto';
-    font-size: 12px;
-    line-height: 14px;
-    margin-top: -5px;
-    color: rgba(2, 84, 80, 1);
-    padding-left: 2%;
-    box-sizing: border-box;
-}
-
-.avatar-desc p:first-child {
-    margin-bottom: 12px;
-    display: block
-}
-
-.super-power-section {
-    float: left;
-    width: 100%;
-    margin-top: 12px;
-}
-
-.single-super-power {
-    float: left;
-    width: 28.5%;
-}
-
-.avatar-td-1 {
-    font-size: 11px;
-    float: left;
-    width: 63%;
-    color: #3B3B3B;
-}
-
-.de .avatar-td-1 {
-    font-size: 10px;
-}
-
-.avarat-td-img {
-    float: left;
-    margin-right: 14px;
-    width: 30px;
-}
-
-.avarat-td-img img {
-    margin-top: 11px;
-}
-
-.super-power-section .single-super-power:nth-child(2) {
-    width: 37%;
-}
-
-.super-power-section .single-super-power:nth-child(3) .avatar-td-1 {
-    width: 78%
-}
-
-.avatar-td-1 strong {
-    font-size: 15px;
-    display: inline-block;
-    padding-bottom: 3px;
-    color: #025450;
-}
-
-/*personal details*/
-.first-section-scores {
-    margin-top: 12px;
-    float: left;
-}
-
-.pdf-container {
-    margin-left: auto !important;
-    margin-right: auto !important;
-}
-
-.closer-look-container {
-    padding: 0px;
-}
-
-.closer-look-body {
-    overflow: hidden;
-    padding: 0px;
-}
-
-.closer-look-left {
-    width: 28%;
-}
-
-.closer-look-left .closer-loook-part:nth-child(2) .closer-look-table-img,
-.closer-look-left .closer-loook-part:last-child .closer-look-table-img {
-    vertical-align: top;
-}
-
-.closer-look-right {
-    width: 53.3%;
-}
-
-.closer-look-middle {
-    width: 18.7%;
-    margin-top: 18px;
-    background: url(../images/middle_arrows_image.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    box-sizing: border-box;
-    height: 229px;
-    border-right: 8px solid #f8f8f3;
-}
-
-.closer-look-middle img {
-    width: 100%;
-    display: none;
-}
-
-.closer-look-title {
-    font-family: 'Frank Ruhl Libre';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 18.3px;
-    line-height: 25px;
-    color: #025450;
-    margin-bottom: 20px;
-}
-
-.closer-look-table-img, .closer-look-details {
-    display: inline-block;
-}
-
-.closer-look-details h2 {
-    font-family: 'Frank Ruhl Libre';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 15px;
-    color: #000000;
-    margin: 0;
-}
-
-.closer-look-example {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 11px;
-    line-height: 17px;
-    color: #676767;
-}
-
-.de .closer-look-example {
-    font-size: 10px;
-}
-
-.closer-look-table-img {
-    width: 59px;
-    margin-right: 16px;
-    vertical-align: middle;
-}
-
-.closer-look-table-img img {
-    width: 100%
-}
-
-.closer-loook-part {
-    margin-bottom: 18px;
-}
-
-.closer-look-left, .closer-look-middle, .closer-look-right {
-    float: left;
-}
-
-.sanusx-score-section .meter-body {
-    overflow: hidden;
-    padding: 17px 15px 10px 15px;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 4%);
-    border-radius: 8px;
-    margin: 19px 0px 0px 0px;
-    box-sizing: border-box
-}
-
-.sanusx-score-section .meter-body:last-child {
-    margin-top: 11px;
-}
-
-.speedometer-container svg {
-    width: 118%;
-    margin-top: -22px;
-    overflow: visible;
-}
-
-.speedometer-container img {
-    width: 100%;
-}
-
-.score-circle {
-    width: 23%;
-    float: left;
-    box-sizing: border-box;
-    margin-right: 5%;
-}
-
-.speedometer-circle {
-    position: relative
-}
-
-.speedometer-container {
-    text-align: center;
-    display: inline-block;
-    width: 100%;
-    position: relative;
-}
-
-.needle-container {
-    position: absolute;
-    right: 0;
-    top: 13px;
-    left: 0;
-    height: 60px;
-    width: 65px;
-    margin-left: 8px;
-    margin-right: 10px;
-    margin-top: 0;
-}
-
-.needle-container img {
-    width: 18px;
-    position: absolute;
-    bottom: 0;
-    display: block;
-    vertical-align: middle;
-    max-width: 100%;
-    background-color: transparent;
-}
-
-.speedometer-value {
-    z-index: 5;
-    top: 24px;
-    position: absolute;
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    right: 0px;
-    text-align: center;
-}
-
-span.speedometer-value-down {
-    color: #000;
-    font-size: 11px;
-    font-weight: 300;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: -0.34px;
-    text-align: center;
-    margin-top: -1px;
-    display: block;
-}
-
-.meter-needle.ui.image {
-    width: 12px !important;
-    position: absolute;
-    bottom: 0;
-    height: auto !important;
-}
-
-.score-details {
-    width: 70%;
-    float: left;
-}
-
-.score-description {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 11.5px;
-    line-height: 16px;
-    color: #676767;
-}
-
-.de .score-description {
-    font-size: 10px
-}
-
-.score-header {
-    font-family: 'Frank Ruhl Libre';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 14px;
-    line-height: 115%;
-    color: #333333;
-    margin-bottom: 7px
-}
-
-.closer-look-details {
-    width: 53%;
-}
-
-/*predictions-section*/
-.predictions-section {
-    float: left;
-    width: 100%;
-}
-
-.predictions-title {
-    font-family: 'Frank Ruhl Libre';
-    font-weight: bold;
-    font-size: 18.5px;
-    color: #025450;
-    margin-bottom: 7px;
-}
-
-.predictions-desc {
-    font-family: 'Roboto';
-    font-size: 13.3px;
-    margin-bottom: 15px;
-}
-
-.predictions-body {
-    float: left;
-    width: 100%;
-    position: relative;
-    display: flex;
-}
-
-.prediction-component {
-    width: 32.66%;
-    float: left;
-    margin-right: 1%;
-    background: #fff;
-    border-radius: 7px;
-    box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 4%);
-    border-top: 6px solid rgba(36, 187, 96, 1);
-    display: inline-flex;
-}
-
-.predictions-body .prediction-component.prediction-wrong {
-    border-color: grey
-}
-
-
-.predictions-body .prediction-component:last-child {
-    margin-right: 0;
-}
-
-.prediction-sub-image {
-    width: 20.7%;
-    text-align: center;
-    float: left;
-    margin-right: 14px;
-}
-
-.prediction-des-container {
-    width: 72%;
-    float: left;
-}
-
-.prediction-sub-result {
-    padding: 8px 6px;
-    box-sizing: border-box;
-    font-family: 'Roboto';
-    font-size: 10px;
-    color: #025450;
-    background: #CBE3BF;
-    float: left;
-    border-radius: 4px;
-}
-
-.prediction-component.prediction-wrong .prediction-sub-result {
-    background: #E9E8D8
-}
-
-.prediction-component.prediction-wrong .prediction-sub-result img {
-    display: none;
-}
-
-.prediction-sub-result img {
-    width: 10px;
-    margin-right: 6px;
-    float: left;
-    margin-top: 8px;
-}
-
-.prediction-sub-result div {
-    float: left;
-    width: 88%;
-}
-
-.prediction-container {
-    padding: 12px 6px 9px 10px;
-    width: 100%;
-    box-sizing: border-box;
-    float: left;
-}
-
-.prediction-sub-title {
-    font-family: 'Roboto';
-    color: #676767;
-    font-size: 9.2px;
-    margin-bottom: 3px;
-}
-
-.prediction-sub-desc {
-    color: #025450;
-    font-family: 'Frank Ruhl Libre';
-    font-weight: bold;
-    line-height: 1;
-    font-size: 14px;
-    margin-bottom: 4px;
-}
-
-/* Recommendations */
-.recommendations-section {
-    float: left;
-    width: 100%
-}
-
-.recommendations-title {
-    color: rgba(2, 84, 80, 1);
-    font-family: 'Frank Ruhl Libre';
-    margin-top: 22px;
-    font-weight: bold;
-    font-size: 18.4px;
-    margin-bottom: 10px;
-}
-
-.tips-section {
-    display: flex;
-}
-
-.insight-container {
-    width: 32.66%;
-    float: left;
-    margin-right: 1%;
-    padding: 12px 11px;
-    box-sizing: border-box;
-    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 4%);
-    background: #fff;
-    border-radius: 5px;
-    display: inline-flexn;
-}
-
-
-.tips-section .insight-container:last-child {
-    margin-right: 0
-}
-
-.chunk-image {
-    float: left;
-    width: 55px;
-    min-height: 59px;
-}
-
-.insight-container img {
-    width: 46px
-}
-
-.tip-score-section {
-    float: left;
-    width: 72%;
-    padding-left: 0%;
-    box-sizing: border-box;
-}
-
-.top-tip-section {
-    float: left;
-    width: 100%;
-    margin-bottom: 2px;
-}
-
-.tips-text {
-    color: #676767;
-    font-size: 10.5px;
-    font-family: 'Roboto';
-    width: 100%;
-    float: left;
-    line-height: 14px;
-}
-
-.de .tips-text {
-    font-size: 10px;
-    line-height: 13px;
-}
-
-.tip-title {
-    color: #025450;
-    font-family: 'Frank Ruhl Libre';
-    font-size: 15px;
-    font-weight: bold;
-    margin-bottom: 8px;
-}
-
-.score-lines {
-    width: 88%;
-    float: left;
-    clear: both;
-    margin-bottom: 2px;
-}
-
-.score-line {
-    width: 17%;
-    height: 4px;
-    float: left;
-    margin-right: 5px;
-    background: #b9b7b7;
-    border-radius: 18px;
-}
-
-.score-lines .score-line:last-child {
-    margin-right: 0
-}
-
-.score-sum {
-    color: #025450;
-    font-family: 'Roboto';
-    font-size: 9px;
-    display: block;
-    float: left;
-}
-
-.score-lines .score-line.highlighted.highlight-red {
-    background: #F58F90;
-}
-
-.insight-container .score-lines .score-line.highlight-blue {
-    background: #80A9A7;
-}
-
-.insight-container .score-lines .score-line.highlight-green {
-    background: #CCDDDC;
-}
-
-/*Footer*/
-
-.print-page-footer {
-    width: 100%;
-    float: left;
-    margin-top: 20px;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-.de .print-page-footer {
-    margin-top: 10px
-}
-
-.footer-icon {
-    width: 39px;
-    float: left;
-    margin-top: 9px
-}
-
-.footer-content {
-    float: left;
-    width: calc(100% - 43px);
-    font-size: 8.5px;
-    color: rgba(103, 103, 103, 1);
-    font-family: 'Open Sans', sans-serif !important;
-    font-weight: 400;
-    font-style: italic;
-    padding-left: 5px;
-    box-sizing: border-box;
-    line-height: 13px;
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    src: url('../fonts/Roboto-Light.ttf');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/Roboto-Regular.ttf');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: bold;
+    src: url('../fonts/Roboto-Bold.ttf');
+}
+
+
+@font-face {
+    font-family: 'FrankRuhlLibre';
+    font-style: normal;
+    font-weight: 100;
+    src: url('../fonts/FrankRuhlLibre-Regular.ttf')
+}
+
+@font-face {
+    font-family: 'FrankRuhlLibre';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/FrankRuhlLibre-Regular.ttf')
+}
+
+@font-face {
+    font-family: 'Frank Ruhl Libre';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../fonts/FrankRuhlLibre-Bold.ttf')
+}
+
+@font-face {
+    font-family: 'Frank Ruhl Libre';
+    font-style: normal;
+    font-weight: bold;
+    src: url('../fonts/FrankRuhlLibre-Bold.ttf')
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    /* background: url('../images/A4.png');*/
+    background-repeat: no-repeat;
+    background-size: 211mm;
+    background-position: center top;
+    box-sizing: border-box;
+    width: 210mm;
+    height: 297mm;
+    MARGIN: AUTO;
+    font-family: 'Open Sans', sans-serif;
+    background-color: #f8f8f3;
+}
+
+html {
+    background: unset;
+    height: 100%;
+    scroll-behavior: smooth;
+}
+
+body {
+    position: relative;
+    font-family: 'Open Sans', sans-serif;
+}
+
+header {
+    min-height: 38px;
+    padding: 3.143em 3.571em 0;
+}
+
+.content {
+    width: 100%;
+    float: left;
+    margin-top: 29px;
+    padding: 0px 36px 0 27px;
+    box-sizing: border-box;
+    direction: ltr;
+}
+
+img {
+    width: 100%
+}
+
+/*Header*/
+.report-header {
+    color: rgba(51, 51, 51, 1);
+    font-size: 23.5px;
+    margin-bottom: 20px;
+    letter-spacing: -0.9px;
+    display: inline-block;
+    margin-top: 0;
+    font-family: Open Sans;
+    line-height: 34px;
+    letter-spacing: -0.9px;
+}
+
+.report-logo {
+    display: inline-block;
+    float: left;
+    margin-right: 6px;
+}
+
+.report-logo img {
+    width: 84px;
+    display: inline-block;
+    margin-left: 6px;
+}
+
+.avatar-img {
+    width: 113px;
+    display: inline-block;
+    float: left;
+    margin-right: 10px;
+}
+
+.avata-info {
+    float: left;
+    margin-top: 30px;
+    width: 56%;
+}
+
+.avatar-title {
+    font-family: 'Roboto';
+    font-size: 17.5px;
+}
+
+.hero-title {
+    color: #005651;
+    font-family: 'Frank Ruhl Libre';
+    font-size: 16px;
+}
+
+.avatar-main-info {
+    float: left;
+    width: 39%;
+}
+
+.avatar-desc {
+    width: 61%;
+    float: left;
+    font-family: 'Roboto';
+    font-size: 12px;
+    line-height: 14px;
+    margin-top: -5px;
+    color: rgba(2, 84, 80, 1);
+    padding-left: 2%;
+    box-sizing: border-box;
+}
+
+.avatar-desc p:first-child {
+    margin-bottom: 12px;
+    display: block
+}
+
+.super-power-section {
+    float: left;
+    width: 100%;
+    margin-top: 12px;
+}
+
+.single-super-power {
+    float: left;
+    width: 28.5%;
+}
+
+.avatar-td-1 {
+    font-size: 11px;
+    float: left;
+    width: 63%;
+    color: #3B3B3B;
+}
+
+.de .avatar-td-1 {
+    font-size: 10px;
+}
+
+.avarat-td-img {
+    float: left;
+    margin-right: 14px;
+    width: 30px;
+}
+
+.avarat-td-img img {
+    margin-top: 11px;
+}
+
+.super-power-section .single-super-power:nth-child(2) {
+    width: 37%;
+}
+
+.super-power-section .single-super-power:nth-child(3) .avatar-td-1 {
+    width: 78%
+}
+
+.avatar-td-1 strong {
+    font-size: 15px;
+    display: inline-block;
+    padding-bottom: 3px;
+    color: #025450;
+}
+
+/*personal details*/
+.first-section-scores {
+    margin-top: 12px;
+    float: left;
+}
+
+.pdf-container {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.closer-look-container {
+    padding: 0px;
+}
+
+.closer-look-body {
+    overflow: hidden;
+    padding: 0px;
+}
+
+.closer-look-left {
+    width: 28%;
+}
+
+.closer-look-left .closer-loook-part:nth-child(2) .closer-look-table-img,
+.closer-look-left .closer-loook-part:last-child .closer-look-table-img {
+    vertical-align: top;
+}
+
+.closer-look-right {
+    width: 53.3%;
+}
+
+.closer-look-middle {
+    width: 18.7%;
+    margin-top: 18px;
+    background: url(../images/middle_arrows_image.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    box-sizing: border-box;
+    height: 229px;
+    border-right: 8px solid #f8f8f3;
+}
+
+.closer-look-middle img {
+    width: 100%;
+    display: none;
+}
+
+.closer-look-title {
+    font-family: 'Frank Ruhl Libre';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18.3px;
+    line-height: 25px;
+    color: #025450;
+    margin-bottom: 20px;
+}
+
+.closer-look-table-img, .closer-look-details {
+    display: inline-block;
+}
+
+.closer-look-details h2 {
+    font-family: 'Frank Ruhl Libre';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 15px;
+    color: #000000;
+    margin: 0;
+}
+
+.closer-look-example {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 11px;
+    line-height: 17px;
+    color: #676767;
+}
+
+.de .closer-look-example {
+    font-size: 10px;
+}
+
+.closer-look-table-img {
+    width: 59px;
+    margin-right: 16px;
+    vertical-align: middle;
+}
+
+.closer-look-table-img img {
+    width: 100%
+}
+
+.closer-loook-part {
+    margin-bottom: 18px;
+}
+
+.closer-look-left, .closer-look-middle, .closer-look-right {
+    float: left;
+}
+
+.sanusx-score-section .meter-body {
+    overflow: hidden;
+    padding: 17px 15px 10px 15px;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 4%);
+    border-radius: 8px;
+    margin: 19px 0px 0px 0px;
+    box-sizing: border-box
+}
+
+.sanusx-score-section .meter-body:last-child {
+    margin-top: 11px;
+}
+
+.speedometer-container svg {
+    width: 118%;
+    margin-top: -22px;
+    overflow: visible;
+}
+
+.speedometer-container img {
+    width: 100%;
+}
+
+.score-circle {
+    width: 23%;
+    float: left;
+    box-sizing: border-box;
+    margin-right: 5%;
+}
+
+.speedometer-circle {
+    position: relative
+}
+
+.speedometer-container {
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+    position: relative;
+}
+
+.needle-container {
+    position: absolute;
+    right: 0;
+    top: 13px;
+    left: 0;
+    height: 60px;
+    width: 65px;
+    margin-left: 8px;
+    margin-right: 10px;
+    margin-top: 0;
+}
+
+.needle-container img {
+    width: 18px;
+    position: absolute;
+    bottom: 0;
+    display: block;
+    vertical-align: middle;
+    max-width: 100%;
+    background-color: transparent;
+}
+
+.speedometer-value {
+    z-index: 5;
+    top: 24px;
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0px;
+    text-align: center;
+}
+
+span.speedometer-value-down {
+    color: #000;
+    font-size: 11px;
+    font-weight: 300;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: -0.34px;
+    text-align: center;
+    margin-top: -1px;
+    display: block;
+}
+
+.meter-needle.ui.image {
+    width: 12px !important;
+    position: absolute;
+    bottom: 0;
+    height: auto !important;
+}
+
+.score-details {
+    width: 70%;
+    float: left;
+}
+
+.score-description {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 11.5px;
+    line-height: 16px;
+    color: #676767;
+}
+
+.de .score-description {
+    font-size: 10px
+}
+
+.score-header {
+    font-family: 'Frank Ruhl Libre';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 115%;
+    color: #333333;
+    margin-bottom: 7px
+}
+
+.closer-look-details {
+    width: 53%;
+}
+
+/*predictions-section*/
+.predictions-section {
+    float: left;
+    width: 100%;
+}
+
+.predictions-title {
+    font-family: 'Frank Ruhl Libre';
+    font-weight: bold;
+    font-size: 18.5px;
+    color: #025450;
+    margin-bottom: 7px;
+}
+
+.predictions-desc {
+    font-family: 'Roboto';
+    font-size: 13.3px;
+    margin-bottom: 15px;
+}
+
+.predictions-body {
+    float: left;
+    width: 100%;
+    position: relative;
+    display: flex;
+}
+
+.prediction-component {
+    width: 32.66%;
+    float: left;
+    margin-right: 1%;
+    background: #fff;
+    border-radius: 7px;
+    box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 4%);
+    border-top: 6px solid rgba(36, 187, 96, 1);
+    display: inline-flex;
+}
+
+.predictions-body .prediction-component.prediction-wrong {
+    border-color: grey
+}
+
+
+.predictions-body .prediction-component:last-child {
+    margin-right: 0;
+}
+
+.prediction-sub-image {
+    width: 20.7%;
+    text-align: center;
+    float: left;
+    margin-right: 14px;
+}
+
+.prediction-des-container {
+    width: 72%;
+    float: left;
+}
+
+.prediction-sub-result {
+    padding: 8px 6px;
+    box-sizing: border-box;
+    font-family: 'Roboto';
+    font-size: 10px;
+    color: #025450;
+    background: #CBE3BF;
+    float: left;
+    border-radius: 4px;
+}
+
+.prediction-component.prediction-wrong .prediction-sub-result {
+    background: #E9E8D8
+}
+
+.prediction-component.prediction-wrong .prediction-sub-result img {
+    display: none;
+}
+
+.prediction-sub-result img {
+    width: 10px;
+    margin-right: 6px;
+    float: left;
+    margin-top: 8px;
+}
+
+.prediction-sub-result div {
+    float: left;
+    width: 88%;
+}
+
+.prediction-container {
+    padding: 12px 6px 9px 10px;
+    width: 100%;
+    box-sizing: border-box;
+    float: left;
+}
+
+.prediction-sub-title {
+    font-family: 'Roboto';
+    color: #676767;
+    font-size: 9.2px;
+    margin-bottom: 3px;
+}
+
+.prediction-sub-desc {
+    color: #025450;
+    font-family: 'Frank Ruhl Libre';
+    font-weight: bold;
+    line-height: 1;
+    font-size: 14px;
+    margin-bottom: 4px;
+}
+
+/* Recommendations */
+.recommendations-section {
+    float: left;
+    width: 100%
+}
+
+.recommendations-title {
+    color: rgba(2, 84, 80, 1);
+    font-family: 'Frank Ruhl Libre';
+    margin-top: 22px;
+    font-weight: bold;
+    font-size: 18.4px;
+    margin-bottom: 10px;
+}
+
+.tips-section {
+    display: flex;
+}
+
+.insight-container {
+    width: 32.66%;
+    float: left;
+    margin-right: 1%;
+    padding: 12px 11px;
+    box-sizing: border-box;
+    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 4%);
+    background: #fff;
+    border-radius: 5px;
+    display: inline-flexn;
+}
+
+
+.tips-section .insight-container:last-child {
+    margin-right: 0
+}
+
+.chunk-image {
+    float: left;
+    width: 55px;
+    min-height: 59px;
+}
+
+.insight-container img {
+    width: 46px
+}
+
+.tip-score-section {
+    float: left;
+    width: 72%;
+    padding-left: 0%;
+    box-sizing: border-box;
+}
+
+.top-tip-section {
+    float: left;
+    width: 100%;
+    margin-bottom: 2px;
+}
+
+.tips-text {
+    color: #676767;
+    font-size: 10.5px;
+    font-family: 'Roboto';
+    width: 100%;
+    float: left;
+    line-height: 14px;
+}
+
+.de .tips-text {
+    font-size: 10px;
+    line-height: 13px;
+}
+
+.tip-title {
+    color: #025450;
+    font-family: 'Frank Ruhl Libre';
+    font-size: 15px;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+
+.score-lines {
+    width: 88%;
+    float: left;
+    clear: both;
+    margin-bottom: 2px;
+}
+
+.score-line {
+    width: 17%;
+    height: 4px;
+    float: left;
+    margin-right: 5px;
+    background: #b9b7b7;
+    border-radius: 18px;
+}
+
+.score-lines .score-line:last-child {
+    margin-right: 0
+}
+
+.score-sum {
+    color: #025450;
+    font-family: 'Roboto';
+    font-size: 9px;
+    display: block;
+    float: left;
+}
+
+.score-lines .score-line.highlighted.highlight-red {
+    background: #F58F90;
+}
+
+.insight-container .score-lines .score-line.highlight-blue {
+    background: #80A9A7;
+}
+
+.insight-container .score-lines .score-line.highlight-green {
+    background: #CCDDDC;
+}
+
+/*Footer*/
+
+.print-page-footer {
+    width: 100%;
+    float: left;
+    margin-top: 20px;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.de .print-page-footer {
+    margin-top: 10px
+}
+
+.footer-icon {
+    width: 39px;
+    float: left;
+    margin-top: 9px
+}
+
+.footer-content {
+    float: left;
+    width: calc(100% - 43px);
+    font-size: 8.5px;
+    color: rgba(103, 103, 103, 1);
+    font-family: 'Open Sans', sans-serif !important;
+    font-weight: 400;
+    font-style: italic;
+    padding-left: 5px;
+    box-sizing: border-box;
+    line-height: 13px;
 }