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

package/assets/styles.css

@@ -1,1545 +1,1545 @@
-/* arabic */
-@font-face {
-    font-family: 'Cairo',Sans-serif;
-    font-style: normal;
-    font-weight: 400;
-    src: url('./fonts/cairo-arabic.woff2') format('woff2');
-    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
-}
-/* latin-ext */
-@font-face {
-    font-family: 'Cairo',Sans-serif;
-    font-style: normal;
-    font-weight: 400;
-    src: url('./fonts/cairo-latin-ext.woff2') format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-    font-family: 'Cairo',Sans-serif;
-    font-style: normal;
-    font-weight: 400;
-    src: url('./fonts/latin.woff2') format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic */
-@font-face {
-    font-family: 'Helvetica';
-    font-style: normal;
-    font-weight: 400;
-    src: url('./fonts/cyrillic.woff2') format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* latin-ext */
-@font-face {
-    font-family: 'Helvetica';
-    font-style: normal;
-    font-weight: 400;
-    src: url(./fonts/helvatica-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-    font-family: 'Helvetica';
-    font-style: normal;
-    font-weight: 400;
-    src: url(./fonts/helvatica-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-html, body {
-    background-color: #eee;
-    font-family: Helvetica;
-    letter-spacing: -.02em;
-    color: #555555;
-    margin-bottom: 0;
-}
-
-.paper {
-    background: #fff;
-    margin: 0 auto;
-    width: 1140px;
-    height: 1600px;
-    page-break-after: always;
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 50px;
-}
-
-.all-pages {
-    background: #fff;
-    margin: 0 auto;
-    width: 1140px;
-    height: auto;
-    /*page-break-after: always;*/
-    position: relative;
-    overflow: hidden;
-}
-
-.new-page:not(#summary) {
-    page-break-before: auto;
-    page-break-inside: avoid;
-    float: left;
-    width: 95%;
-    overflow: hidden;
-    display: block;
-}
-
-.first-new-page {
-    page-break-before: auto;
-}
-
-#content.content {
-    padding-bottom: 0;
-}
-
-.page-head {
-    padding: 50px 50px 10px 50px;
-    overflow: auto;
-}
-
-.page-head .address {
-    font-size: 13px;
-}
-
-.report-date {
-    float: right;
-    width: 200px;
-}
-
-.pin-qr {
-    text-align: right;
-    /*padding: 15px;*/
-    background: #fff;
-    width: 125px !important;
-    height: 125px !important;
-}
-
-table tr {
-    page-break-inside: avoid;
-}
-
-
-.intro {
-    padding: 50px;
-    padding-bottom: 0;
-    padding-top: 6px;
-    display: inline-block;
-    page-break-inside: avoid;
-}
-
-.patient-info {
-}
-
-.patient-info .col {
-    width: 50%;
-    float: left;
-    margin-bottom: 5px;
-    overflow: auto;
-}
-
-.lab-box {
-    page-break-inside: avoid;
-}
-
-.patient-box {
-    padding: 20px 0;
-    background: none;
-    box-shadow: none;
-}
-
-.info-label, .info-value {
-    font-size: 14px;
-    padding-right: 10px;
-    margin-bottom: 5px;
-    color: #2F2F2F;
-    font-weight: 500;
-    box-sizing: border-box;
-}
-
-.info-label {
-    font-size: 15px;
-    color: #8099af;
-    font-weight: 500;
-}
-
-.underline {
-    border-bottom: 1px solid #CCD6DD;
-}
-
-.report-title .info-label, .report-title .info-value {
-    text-align: right;
-}
-
-.report-title .info-value {
-    word-break: break-word;
-}
-
-.color-box {
-    border-radius: 5px;
-    background-color: #f2f5f8;
-    padding: 10px;
-    border-bottom: 1px solid #ccd6dd;
-    overflow: auto;
-}
-
-.plus-info {
-    margin: 0 -10px;
-    padding-bottom: 0;
-}
-
-.plus-info .heading {
-    font-size: 34px;
-    color: #175F32;
-    font-weight: 300;
-    margin-bottom: 10px;
-    letter-spacing: -0.06em;
-}
-
-.plus-info .description {
-    padding-right: 20px;
-    line-height: 1.6em;
-}
-
-.plus-info .pin {
-    font-size: 30px;
-    font-family: monospace;
-    color: #DB3245;
-    margin-top: 10px;
-    letter-spacing: 0.1em;
-}
-
-.plus-info .logos {
-    float: right;
-}
-
-.plus-info .logos img {
-    margin-left: 20px;
-}
-
-.header_logo {
-    box-shadow: unset !important;
-    mso-border-shadow: no !important;
-
-}
-
-.logo {
-    box-shadow: unset !important;
-    mso-border-shadow: no !important;
-}
-
-
-.content {
-    padding: 30px 50px;
-}
-
-.section {
-    margin: 0;
-    display: block;
-}
-
-.compact .section {
-    margin: 0 0 20px 0;
-    display: block;
-}
-
-.clear {
-    clear: both;
-    height: 1px;
-}
-
-.sign {
-    text-align: right;
-    margin-top: -90px;
-}
-
-.note {
-    margin-top: -50px;
-}
-
-.section-content {
-    padding-left: 0;
-}
-
-.panel-title {
-    width: calc(100% - 10px);
-}
-
-.panel-title, .resume-title, .report-title {
-    font-size: 30px;
-    border-bottom: 1px solid #CCD6DD;
-    background: #F2F5F8AA;
-    color: #8099AF;
-    padding: 7px 10px;
-    font-weight: 300;
-    border-radius: 10px 10px 0 0;
-    margin-bottom: 4px;
-    margin-left: -10px;
-    margin-right: 0;
-    display: block;
-    width: 100%;
-    clear: both;
-}
-
-.resume-title:after {
-    content: "";
-    color: transparent;
-    display: block;
-    height: 250px;
-    margin-bottom: -250px;
-    page-break-inside: avoid;
-}
-
-.panel-title:after {
-    content: "";
-    color: transparent;
-    display: block;
-    height: 250px;
-    margin-bottom: -250px;
-    page-break-inside: avoid;
-}
-
-.report-title {
-    background: none;
-    font-size: 39px;
-    margin-right: 20px;
-}
-
-.report-title .heading {
-    letter-spacing: -0.06em;
-}
-
-.resume-title {
-    padding-bottom: 4px;
-    font-weight: 500;
-    margin-top: 0;
-    background: none;
-    font-size: 38px;
-    clear: both;
-    margin-bottom: 20px;
-}
-
-.listing td {
-    border-bottom: 1px solid #eee;
-    padding: 1px 0;
-    vertical-align: top;
-}
-
-.listing tr.header td, .listing tr.last td {
-    border-bottom: none;
-}
-
-.listing tbody > tr:last-child td {
-    border-bottom: none !important;
-}
-
-.listing tr.header td {
-    font-size: 2px;
-    line-height: 2px;
-    color: white;
-}
-
-/* show the "reference ranges" label only in the first listing in each page */
-.content > .section:first-child .listing .header td {
-    font-size: 12px;
-    line-height: 13px;
-    color: #aaa;
-    padding: 10px 0;
-}
-
-
-.biom-title {
-    font-size: 18px;
-    line-height: 25px;
-    padding: 0 10px;
-}
-
-.biom-value {
-    font-size: 20px;
-    /* TODO: important to re check */
-    text-align: left;
-    padding-right: 6px;
-    line-height: 25px;
-    vertical-align: top;
-    font-family: "Open Sans",sans-serif !important;
-}
-
-.biom-value-custom {
-    /*font-size:16px;*/
-    -ms-word-break: break-word;
-    word-break: break-word;
-}
-
-.biom-method, .panel-title .method, .lab-info {
-    font-size: 10px;
-    color: #aaa;
-    padding-top: 4px;
-}
-
-.lab-info {
-    color: #000;
-    display: inline-block;
-    font-weight: bold;
-}
-
-.biom-past {
-    font-size: 12px;
-    text-align: left;
-    color: #aaa;
-    line-height: 25px;
-}
-
-.biom-range {
-    font-size: 12px;
-    text-align: left;
-    line-height: 25px;
-    vertical-align: bottom;
-}
-
-.biom-unit {
-    font-size: 14px;
-    text-align: left;
-    line-height: 25px;
-    vertical-align: top !important;
-    padding-top: 4px !important;
-    /*display:inline-block;*/
-    /*width: 95px;*/
-}
-
-.biom-range {
-    color: #aaa;
-}
-
-.biom-last {
-    color: #aaa;
-    font-size: 12px;
-    text-align: left;
-    line-height: 25px;
-    vertical-align: bottom;
-    position: relative;
-    padding-right: 25px !important;
-}
-
-.risk:not(.green) td {
-    background: #FBEEEE;
-    border-color: #fff;
-}
-
-.risk.green .biom-value {
-    font-family: "Open Sans",sans-serif !important;
-    font-weight: normal !important;
-    color: #555;
-}
-
-.risk .biom-value {
-    font-family: "Open Sans",sans-serif !important;
-    font-weight: bold;
-    color: #E05A5A;
-}
-
-.risk .biom-title {
-    font-weight: bold;
-}
-
-.risk.orange td {
-    background: #FDF1ED;
-
-}
-
-.risk.yellow .biom-value {
-    color: #F7AA2E;
-    font-family: "Open Sans",sans-serif !important;
-}
-
-.risk.orange .biom-value {
-    /*font-weight: normal;*/
-    color: #EE734E;
-    font-family: "Open Sans",sans-serif !important;
-}
-
-.chart-canvas {
-    padding-top: 20px;
-}
-
-
-.biom-bar,
-.biom-range {
-    position: relative;
-}
-
-.bar {
-    display: table;
-    float: right;
-    width: 90px;
-    margin-right: 10px;
-    margin-top: 7px;
-    height: 10px;
-}
-
-.bar > div:first-child {
-    border-radius: 3px 0 0 3px;
-}
-
-.bar > div:last-child {
-    border-radius: 0 3px 3px 0;
-    border-right: 1px solid #00000000;
-}
-
-.risk > td:first-child {
-    border-radius: 4px 0 0 4px;
-}
-
-.risk > td:last-child {
-    border-radius: 0 4px 4px 0;
-}
-
-.panel {
-    margin-bottom: 20px;
-}
-
-
-.segment {
-    display: table-cell;
-    border-right: 1px solid #fff;
-    background: red;
-    opacity: 1;
-}
-
-.segment.green {
-    background: #02D9D1;
-}
-
-.segment.red {
-    background: #E05A5A;
-}
-
-.segment.blue {
-    background: #41B9D6;
-}
-
-.segment.orange {
-    background: #EE734E;
-}
-
-.segment.black {
-    background: #0F0F0F;
-}
-
-.segment.light-blue,
-.segment.lightblue {
-    background: #87B7CE;
-}
-
-.segment.yellow {
-    background: #F7AA2E;
-}
-
-.segment.dark-red,
-.segment.darkred {
-    background: #AD3630;
-}
-
-.segment.light-red,
-.segment.lightred {
-    background: #FB7377;
-}
-
-.segment.current {
-    background-size: contain !important;
-    background-image: url(c.png) !important;
-    background-repeat: no-repeat !important;
-    background-position: 50% 50% !important;
-    opacity: 1;
-}
-
-.footer {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-}
-
-.footer-content {
-    padding: 50px;
-    text-align: right;
-    height: 50px;
-}
-
-.footer .text {
-    float: left;
-    text-align: left;
-    margin-top: 6px;
-    font-size: 12px;
-    color: #7D817E;
-}
-
-.footer .pages {
-    font-size: 15px;
-}
-
-
-.arrow {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    background-color: #8099AF;
-    top: 6px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    right: 0;
-
-}
-
-.arrow.up {
-    background-image: url(ar-up.png);
-}
-
-.arrow.down {
-    background-image: url(ar-down.png);
-}
-
-.biom-past {
-    position: relative;
-    padding-left: 15px !important;
-    padding-right: 0 !important;
-}
-
-.arrow.green {
-    background-color: #02D9D1;
-}
-
-.arrow.red {
-    background-color: #E05A5A;
-}
-
-.arrow.orange {
-    background-color: #EE734E;
-}
-
-.card-wrapper {
-}
-
-.card {
-    border-bottom: 2px solid #8099AF44;
-    background: #F2F5F888;
-    border-radius: 10px;
-    margin-bottom: 5px;
-    position: relative;
-    padding-top: 8px;
-    color: #555555;
-    min-height: 60px;
-    display: flex;
-    justify-content: start;
-    align-items: flex-start;
-    page-break-inside: avoid;
-}
-
-.card .text {
-    padding: 14px 0;
-    padding-right: 10px;
-    font-size: 14px;
-    line-height: 1.5em;
-    word-break: break-word;
-}
-
-.insight-text {
-    width: 80% !important;
-    padding: 10px 0;
-}
-
-.insight-disclaimer {
-    width: auto !important;
-    white-space: pre-line;
-    font-style: italic;
-    padding: 5px 82px 0;
-    color: #9c9d9d;
-}
-
-.card .title {
-    font-size: 1.5em;
-    margin-bottom: 10px;
-}
-
-.card.has-related .text {
-    width: 80%;
-}
-
-.card .icon {
-    padding: 10px 20px;
-}
-
-.card .icon img:not(.clinical) {
-    width: auto;
-    filter: grayscale(100%) brightness(.8) opacity(0.8);
-    max-width: 45px;
-}
-
-.clinical {
-    width: 25px !important;
-}
-
-.card.darkred .title,
-.card.dark-red .title,
-.card.red .title {
-    color: #bc2828;
-}
-
-.card.orange .title {
-    color: #FF6E4A;
-}
-
-.card.yellow .title {
-    color: #ffa514;
-}
-
-.card.light-blue .title,
-.card.lightblue .title,
-.card.blue .title {
-    color: #41B9D6;
-}
-
-/*TODO: might need it later*/
-/*.card.yellow .icon img{*/
-/*filter: grayscale(1);*/
-/*}*/
-.card.orange {
-    background: #FFF5E6;
-    border-color: #FFD4C9;
-}
-
-.card.yellow {
-    background: #FFF5E6;
-    border-color: #f9dda9;
-}
-
-.card.green .title {
-    color: inherit;
-}
-
-.card.green {
-    background: #02D9D120;
-    border-color: #02D9D1;
-}
-
-
-.card.cr .icon img {
-    display: none;
-}
-
-.card.cr {
-    border: none;
-    background: none;
-}
-
-.card.cr .text {
-    padding-top: 0;
-    margin-left: 50px;
-}
-
-.card.cr .text span {
-    color: #de0000;
-}
-
-.hidden {
-    visibility: hidden;
-}
-
-.hide-me {
-    display: none;
-}
-
-.related-icons {
-    display: flex;
-    padding: 10px 10px 10px 5rem;
-}
-
-.related {
-    height: 44px;
-    display: table;
-    margin-bottom: 5px;
-    margin-left: 5px;
-}
-
-.related .bicon {
-    width: 38px;
-    height: 38px;
-    border: 3px solid #E05A5A;
-    background: #E05A5A30;
-    border-radius: 100px;
-    line-height: 38px;
-    font-size: 10px !important;
-    text-align: center;
-}
-
-.related.orange .bicon {
-    border-color: #EE734E;
-    background-color: #EE734E30;
-}
-
-.related.green .bicon {
-    border-color: #02D9D1;
-    background-color: #ffffff30;
-}
-
-.related.blue .bicon {
-    border-color: #86B6CD;
-    /*border-style: dotted;*/
-    border-width: 3px;
-    background-color: #ffffff30;
-}
-
-.related.yellow .bicon {
-    border-color: #F7AA2E;
-    background: #F7AA2E30;
-}
-
-.related .label {
-    display: table-cell;
-    vertical-align: middle;
-    font-size: 12px;
-    padding-left: 10px;
-    width: 100px;
-    color: #999;
-}
-
-
-/*** GRID ***************************************
-8 cols in page
-each col width is 130px
-*/
-
-.panel-container {
-    width: 1040px;
-    overflow: auto;
-}
-
-.grid-col {
-    overflow: show;
-    float: left;
-}
-
-.grid-row:not(.biomarker-insights) {
-    page-break-inside: avoid;
-}
-
-.grid-row {
-    overflow: show;
-    float: left;
-    margin: 10px 0px;
-    width: 100%;
-    /*page-break-inside: avoid;*/
-}
-
-.grid-col.size1 {
-    width: 130px;
-}
-
-.grid-col.size2 {
-    width: 260px;
-}
-
-.grid-col.size3 {
-    width: 390px;
-}
-
-.grid-col.size4 {
-    width: 520px;
-}
-
-.grid-col.size5 {
-    width: 650px;
-}
-
-.grid-col.size3 {
-    width: 390px;
-}
-
-.page-head .grid-row {
-    margin: 0;
-}
-
-/**************/
-
-
-/*** panel details ************/
-.biom-circle {
-    width: 62px;
-    height: 62px;
-    line-height: 62px;
-    border: 4px solid #02D9D1;
-    background: #ffffff;
-    display: inline-block;
-    border-radius: 100px;
-    font-size: 14px;
-    text-align: center;
-    overflow: hidden;
-    float: left;
-}
-
-.green .biom-circle {
-    border-color: #02D9D1;
-    background-color: #FFFFFF;
-}
-
-.orange .biom-circle {
-    border-color: #EE734E;
-    background-color: #EE734E30;
-}
-
-.red .biom-circle {
-    border-color: #E05A5A;
-    background-color: #E05A5A30;
-}
-
-.yellow .biom-circle {
-    border-color: #F7AA2E;
-    background-color: #F7AA2E30;
-}
-
-.blue .biom-circle {
-    border-color: #86B6CD;
-    background-color: #FFFFFF;
-}
-
-.biom-info {
-    float: left;
-    margin-left: 16px;
-}
-
-.biom-info .title {
-    font-size: 22px;
-    width: 410px;
-    word-break: break-word;
-}
-
-.biom-info .value, .biomarker-extra-value {
-    font-size: 34px;
-    font-weight: 500;
-    line-height: 1;
-    font-family: "Open Sans",sans-serif !important;
-}
-
-.biom-info .unit, .biomarker-extra-unit {
-    font-size: 20px;
-    font-weight: normal;
-}
-
-.red .colorable {
-    color: #E05A5A;
-}
-
-.orange .colorable {
-    color: #EE734E;
-}
-
-.yellow .colorable {
-    color: #F7AA2E;
-}
-
-.green .colorable {
-    color: inherit;
-}
-
-.blue .colorable {
-    color: inherit;
-}
-
-.dark-red .colorablebg,
-.darkred .colorablebg {
-    background-color: #AD3630;
-}
-
-.red .colorablebg {
-    background-color: #E05A5A;
-}
-
-.orange .colorablebg {
-    background-color: #EE734E;
-}
-
-.yellow .colorablebg {
-    background-color: #F7AA2E;
-}
-
-.green .colorablebg {
-    background-color: #02D9D1;
-}
-
-.blue .colorablebg {
-    background-color: #86B6CD;
-}
-
-.biom-info .risk {
-    font-size: 13px;
-    text-transform: uppercase;
-    display: inline-block;
-    border-radius: 5px;
-    background: #F2F5F8;
-    padding: 4px;
-    margin-top: 4px;
-    display: none;
-}
-
-
-/********/
-.biom-bar table {
-    width: 100%;
-    font-size: 13px;
-    table-layout: fixed;
-}
-
-.biom-bar td {
-    padding: 0px;
-    margin: 0px;
-}
-
-.biom-bar .ranges td {
-    vertical-align: bottom;
-    text-align: center;
-}
-
-.biom-bar .labels td {
-    padding-top: 6px;
-    color: #7D817E;
-    vertical-align: top;
-    padding-bottom: 6px;
-    padding-right: 8px;
-}
-
-.biom-bar .labels td.current {
-    font-weight: bold;
-}
-
-.biom-bar .values td {
-    font-family: "Open Sans",sans-serif !important;
-    color: #C4C4C4;
-    vertical-align: top;
-}
-
-.biom-bar table {
-    border-collapse: collapse;
-}
-
-.biom-bar .range {
-    height: 5px;
-    margin-right: 3px;
-}
-
-.biom-bar .current .range {
-    height: 11px;
-}
-
-.biomarker-container .biom-bar .ranges .current::before {
-    background: url(range-arrow.png) no-repeat center;
-    -webkit-background-size: contain;
-    -moz-background-size: contain;
-    -o-background-size: contain;
-    background-size: contain;
-    display: inline-block;
-    content: "";
-    height: 14px;
-    width: 100%;
-    background-position-x: inherit;
-}
-
-/* History graph */
-.biomarker-container .biom-bar.history .ranges .current::before {
-    content: none;
-}
-
-.biom-bar.history .ranges td:not(.current) .range {
-    height: 1px;
-    background: #CCD6DD;
-}
-
-.biom-bar.history .current .range {
-    height: 3px;
-}
-
-.biom-bar.history td {
-    height: 20px;
-}
-
-
-/* insights */
-
-.biomarker-container {
-    overflow: auto;
-    margin-bottom: 10px;
-}
-
-/* signature */
-.signature {
-    page-break-inside: avoid;
-}
-
-.signature img {
-    margin-left: 20px;
-    max-height: 75px;
-}
-
-.stats-card {
-
-    border-radius: 10px;
-    margin-bottom: 5px;
-    position: relative;
-    padding-top: 8px 0px;
-    color: #555555;
-    min-height: 60px;
-    display: flex;
-    justify-content: start;
-    align-items: flex-start;
-    page-break-inside: avoid;
-}
-
-.stat-related-insight-span {
-    width: 84%;
-    padding: 10px 2px;
-}
-
-.related-text {
-    margin-right: 87px;
-}
-
-.chart {
-}
-
-.detailedListContainer {
-    margin-top: 20px !important;
-    margin-bottom: 20px !important;
-}
-
-.detailedList p {
-    padding: 15px 5px;
-}
-
-.detailedList td {
-    padding: 0px !important;
-    text-align: center !important;
-}
-
-.detailed-list > table.detailedList tr td,
-.detailed-list > table.detailedList tr th {
-    border-top: 1px solid rgba(34, 36, 38, .1);
-    border-bottom: 1px solid rgba(34, 36, 38, .1);
-    border-left: 1px solid rgba(34, 36, 38, .1);
-    border-right: 1px solid rgba(34, 36, 38, .1);
-}
-
-table.detailedList {
-    border: none;
-    border-collapse: collapse !important;
-    width: 100%;
-}
-
-.detailed-list > table.detailedList {
-    margin-top: 20px;
-}
-
-.detailedList-wrapper {
-    display: flex;
-    flex-direction: column;
-}
-
-.detailed-list img {
-    position: absolute;
-    left: 2.5%;
-    top: 50%;
-}
-
-.detailedList p {
-    padding: 5px 15px;
-    margin: 0 !important;
-}
-
-.detailedList td {
-    padding: 0px !important;
-    text-align: left !important;
-}
-
-.detailed-list li {
-    page-break-inside: avoid;
-}
-
-.detailed-list > li:first-child {
-    padding-top: 20px;
-}
-
-.detailed-list > li:first-child:before {
-    padding-top: 17px;
-}
-
-.detailed-list {
-    padding-left: 39px;
-    padding-bottom: 20px;
-    background: rgba(2, 217, 209, 0.1);
-    font-size: 14px;
-    font-weight: 500;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    page-break-inside: auto;
-    color: #212121;
-    border-radius: 5px;
-    margin-top: 10px;
-}
-
-/*table { page-break-inside:auto }*/
-/*tr    { page-break-inside:avoid; page-break-after:auto }*/
-
-ul {
-    /*page-break-inside:auto;*/
-}
-
-li {
-    /*page-break-inside:auto;*/
-}
-
-.card-wrapper {
-    /*page-break-inside:auto;*/
-}
-
-/*.detailed-list li  ul{*/
-/*list-style-image: url('arrow-down-sign-to-navigate.png');*/
-/*background-size:20px;*/
-/*width:20px;*/
-/*height: 20px;*/
-/*}*/
-
-.inner, .outer {
-    padding: 8px;
-}
-
-.outer {
-    padding-left: 20px;
-    page-break-inside: auto;
-}
-
-.inner {
-    page-break-inside: avoid;
-    position: relative;
-}
-
-.inner:before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #222;
-    position: absolute;
-    left: -1%;
-    top: 30%;
-}
-
-/*.detailed-list ul li{*/
-/*list-style: none;*/
-/*position: relative;*/
-/*}*/
-/*.detailed-list ul li :before{*/
-/*content: '';*/
-/*display: inline-block;*/
-/*height: 8px;*/
-/*width: 8px;*/
-/*!*background-image: url('arrow-down-icon-png-26.jpg');*!*/
-/*position: absolute;*/
-/*left: 0;*/
-/*top:25%;*/
-/*}*/
-
-.detailed-list li {
-    padding: 4px;
-    list-style: disc;
-}
-
-.detailed-list li:not(.arrow-icon) {
-    /*list-style-image:url('small-circle.png') !important;*/
-    list-style: none;
-    position: relative;
-}
-
-.detailed-list li:not(.arrow-icon):before {
-    content: '●';
-    font-size: 12px;
-    line-height: 20px;
-    padding-right: 10px;
-    position: absolute;
-    left: -13px;
-    top: 1px;
-}
-
-li.arrow-icon {
-    list-style-image: url('small-down-arrow.png') !important;
-    margin-left: 8px;
-    text-indent: -8px;
-    font-weight: bold;
-}
-
-.arrow-icon + ul {
-    padding-left: 25px;
-}
-
-/*.detailed-list ul li.arrow-icon{*/
-/*list-style-image: url('Webp.net-resizeimage.png') !important;*/
-/*}*/
-.extra-range-placeholder {
-    margin-top: 40px;
-}
-
-.biomarker-container .extra-range-placeholder {
-    padding-top: 10px;
-}
-
-.biomarker-container .range-placeholder:first-child {
-    margin-top: 20px;
-    padding-top: 10px;
-}
-
-.biomarker-container .range-placeholder:last-child {
-    margin-bottom: 20px;
-}
-
-.val-height-1 {
-    line-height: 1 !important;
-}
-
-.val-height-2 {
-    line-height: 2 !important;
-}
-
-.val-height-3 {
-    line-height: 2.4 !important;
-    margin-top: -20px;
-}
-
-.range-placeholder.has-ranges {
-    margin-top: 60px !important;
-}
-
-/*.biomarker-container.hide-flag .should-hide ,*/
-/*.biomarker-container.hide-flag .range-placeholder{*/
-/*display:none;*/
-/*}*/
-.biomarker-container.hide-flag .pair {
-    margin-bottom: 60px;
-    padding-bottom: 20px;
-    direction: ltr;
-    text-align: left;
-
-}
-
-.biomarker-container .biom-bar {
-    margin-top: 60px;
-}
-
-.biomarker .title.has-ranges {
-    margin: 20px 0 !important;
-}
-
-.biomarker .title.has-no-ranges {
-    margin: 20px 0 !important;
-}
-
-.hide-flag .parent-pair,
-.biomarker-container.hide-flag .range-placeholder,
-.hide-flag .biom-parent-value,
-.hide-flag .biom-parent-unit,
-.hide-flag .parent-reference-range,
-.hide-flag .biom-parent-value + br {
-    display: none;
-}
-
-.small-fontSize-circle {
-    font-size: 9px !important;
-}
-
-.bicon-inner {
-    line-height: normal;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.min-pdf .biom-circle {
-    border-color: grey;
-}
-
-.min-pdf .biom-circle {
-    width: 80px;
-    height: 80px;
-    line-height: 80px;
-    font-size: 20px;
-}
-
-.min-pdf .biomarker-container {
-    width: 25%;
-    float: left;
-    overflow: hidden;
-}
-
-.biomarker-min {
-    width: 25%;
-    display: flex;
-    justify-content: center;
-    float: left;
-    margin-bottom: 40px;
-}
-
-.doctor-only-content-header {
-    margin-bottom: 0;
-}
-
-.word-break-normal {
-    word-break: normal;
-}
-
-.doctor-only-content-container {
-    page-break-inside: avoid;
-    page-break-before: auto;
-}
-
-.detailed-list-title-wrapper {
-    page-break-inside: avoid;
-}
-
-.hide-scale .range-placeholder,
-.hide-scale .extra-range-placeholder {
-    display: none;
-}
-
-.tolerance-text {
-    color: red;
-    font-size: 14px;
-    margin: 0 10px 10px 10px;
-}
-
-.remove-line-height > td {
-    line-height: 1px !important;
-    padding: 0 !important;
-}
-
-div#report-summary {
-    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
-    padding: 15px 15px;
-    border-radius: .28571429rem;
-    margin: 15px 0;
-}
-
-.resume-title.report-summary-title,
-.resume-title.report-properties-title {
-    font-size: 20px;
-    margin: 15px 0 15px;
-    padding: 0 0 5px;
-}
-
-.panels-header .biom-range {
-    padding-right: 20px;
-}
-
-.listing .biom-unit {
-    width: 10%;
-}
-
-.panels-header .biom-past {
-    white-space: nowrap;
-}
-
-.panels-header .biom-range {
-    width: 120px !important;
-}
-
-.listing .biom-last,
-.listing .biom-past,
-.listing .biom-range {
-    width: 100px !important;
-}
-
-.small-value-font-size {
-
-    font-size: 14px;
-
-}
-
-.biomarker-container .grid-row.biomarker-insights .card-wrapper .text {
-    width: 80%;
-}
-
-.parent-reference-range,
-.child-referene-range {
-    color: #666;
-    font-size: 15px;
-    font-family: "Open Sans",sans-serif !important;
-}
-
-.panel-subtitle {
-    font-size: 20px;
-    color: #8099AF;
-    padding: 10px 0;
-}
-
-.panel-subtitle-item {
-    font-size: 20px;
-    border-bottom: 1px solid #CCD6DD;
-    background: #F2F5F8AA;
-    color: #8099AF;
-    padding: 7px 10px;
-    font-weight: 300;
-    border-radius: 10px 10px 0 0;
-    margin-bottom: 4px;
-    margin-left: -10px;
-    margin-right: 0;
-    display: block;
-    page-break-inside: avoid;
-    margin-bottom: 10px;
-}
-
-.insight-card {
-    display: block !important;
-}
-
-.insight-container {
-    display: flex;
-}
-
-.from-doctor {
-    padding-bottom: 6px;
-    font-weight: 600;
-}
-
-.signature-image,
-.stamp-image {
-    float: left;
-}
-
-.stamp-image {
-    max-height: unset !important;
-    height: 100px;
-    width: 100px
-}
-
-.section.panel {
-    width: 100%;
-    float: left;
-}
-
-/* Details Section */
-.section.new-page#details-section {
-    width: 100%;
-}
-
-.no-border-bottom > td {
-    border-bottom: none !important;
-}
-.pdf-wrapper {
-    width: 100%;
-    page-break-before: auto;
-    float: left;
-    margin-top: 15px;
-}
-.panel-wrapper{
-    page-break-inside: avoid;
-}
-div#summary {
-    float: left;
-    width: 100%;
-    page-break-inside: avoid;
-}
+/* arabic */
+@font-face {
+    font-family: 'Cairo',Sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/cairo-arabic.woff2') format('woff2');
+    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Cairo',Sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/cairo-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Cairo',Sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Helvetica';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/cyrillic.woff2') format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Helvetica';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./fonts/helvatica-latin-ext.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Helvetica';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./fonts/helvatica-latin.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+html, body {
+    background-color: #eee;
+    font-family: Helvetica;
+    letter-spacing: -.02em;
+    color: #555555;
+    margin-bottom: 0;
+}
+
+.paper {
+    background: #fff;
+    margin: 0 auto;
+    width: 1140px;
+    height: 1600px;
+    page-break-after: always;
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 50px;
+}
+
+.all-pages {
+    background: #fff;
+    margin: 0 auto;
+    width: 1140px;
+    height: auto;
+    /*page-break-after: always;*/
+    position: relative;
+    overflow: hidden;
+}
+
+.new-page:not(#summary) {
+    page-break-before: auto;
+    page-break-inside: avoid;
+    float: left;
+    width: 95%;
+    overflow: hidden;
+    display: block;
+}
+
+.first-new-page {
+    page-break-before: auto;
+}
+
+#content.content {
+    padding-bottom: 0;
+}
+
+.page-head {
+    padding: 50px 50px 10px 50px;
+    overflow: auto;
+}
+
+.page-head .address {
+    font-size: 13px;
+}
+
+.report-date {
+    float: right;
+    width: 200px;
+}
+
+.pin-qr {
+    text-align: right;
+    /*padding: 15px;*/
+    background: #fff;
+    width: 125px !important;
+    height: 125px !important;
+}
+
+table tr {
+    page-break-inside: avoid;
+}
+
+
+.intro {
+    padding: 50px;
+    padding-bottom: 0;
+    padding-top: 6px;
+    display: inline-block;
+    page-break-inside: avoid;
+}
+
+.patient-info {
+}
+
+.patient-info .col {
+    width: 50%;
+    float: left;
+    margin-bottom: 5px;
+    overflow: auto;
+}
+
+.lab-box {
+    page-break-inside: avoid;
+}
+
+.patient-box {
+    padding: 20px 0;
+    background: none;
+    box-shadow: none;
+}
+
+.info-label, .info-value {
+    font-size: 14px;
+    padding-right: 10px;
+    margin-bottom: 5px;
+    color: #2F2F2F;
+    font-weight: 500;
+    box-sizing: border-box;
+}
+
+.info-label {
+    font-size: 15px;
+    color: #8099af;
+    font-weight: 500;
+}
+
+.underline {
+    border-bottom: 1px solid #CCD6DD;
+}
+
+.report-title .info-label, .report-title .info-value {
+    text-align: right;
+}
+
+.report-title .info-value {
+    word-break: break-word;
+}
+
+.color-box {
+    border-radius: 5px;
+    background-color: #f2f5f8;
+    padding: 10px;
+    border-bottom: 1px solid #ccd6dd;
+    overflow: auto;
+}
+
+.plus-info {
+    margin: 0 -10px;
+    padding-bottom: 0;
+}
+
+.plus-info .heading {
+    font-size: 34px;
+    color: #175F32;
+    font-weight: 300;
+    margin-bottom: 10px;
+    letter-spacing: -0.06em;
+}
+
+.plus-info .description {
+    padding-right: 20px;
+    line-height: 1.6em;
+}
+
+.plus-info .pin {
+    font-size: 30px;
+    font-family: monospace;
+    color: #DB3245;
+    margin-top: 10px;
+    letter-spacing: 0.1em;
+}
+
+.plus-info .logos {
+    float: right;
+}
+
+.plus-info .logos img {
+    margin-left: 20px;
+}
+
+.header_logo {
+    box-shadow: unset !important;
+    mso-border-shadow: no !important;
+
+}
+
+.logo {
+    box-shadow: unset !important;
+    mso-border-shadow: no !important;
+}
+
+
+.content {
+    padding: 30px 50px;
+}
+
+.section {
+    margin: 0;
+    display: block;
+}
+
+.compact .section {
+    margin: 0 0 20px 0;
+    display: block;
+}
+
+.clear {
+    clear: both;
+    height: 1px;
+}
+
+.sign {
+    text-align: right;
+    margin-top: -90px;
+}
+
+.note {
+    margin-top: -50px;
+}
+
+.section-content {
+    padding-left: 0;
+}
+
+.panel-title {
+    width: calc(100% - 10px);
+}
+
+.panel-title, .resume-title, .report-title {
+    font-size: 30px;
+    border-bottom: 1px solid #CCD6DD;
+    background: #F2F5F8AA;
+    color: #8099AF;
+    padding: 7px 10px;
+    font-weight: 300;
+    border-radius: 10px 10px 0 0;
+    margin-bottom: 4px;
+    margin-left: -10px;
+    margin-right: 0;
+    display: block;
+    width: 100%;
+    clear: both;
+}
+
+.resume-title:after {
+    content: "";
+    color: transparent;
+    display: block;
+    height: 250px;
+    margin-bottom: -250px;
+    page-break-inside: avoid;
+}
+
+.panel-title:after {
+    content: "";
+    color: transparent;
+    display: block;
+    height: 250px;
+    margin-bottom: -250px;
+    page-break-inside: avoid;
+}
+
+.report-title {
+    background: none;
+    font-size: 39px;
+    margin-right: 20px;
+}
+
+.report-title .heading {
+    letter-spacing: -0.06em;
+}
+
+.resume-title {
+    padding-bottom: 4px;
+    font-weight: 500;
+    margin-top: 0;
+    background: none;
+    font-size: 38px;
+    clear: both;
+    margin-bottom: 20px;
+}
+
+.listing td {
+    border-bottom: 1px solid #eee;
+    padding: 1px 0;
+    vertical-align: top;
+}
+
+.listing tr.header td, .listing tr.last td {
+    border-bottom: none;
+}
+
+.listing tbody > tr:last-child td {
+    border-bottom: none !important;
+}
+
+.listing tr.header td {
+    font-size: 2px;
+    line-height: 2px;
+    color: white;
+}
+
+/* show the "reference ranges" label only in the first listing in each page */
+.content > .section:first-child .listing .header td {
+    font-size: 12px;
+    line-height: 13px;
+    color: #aaa;
+    padding: 10px 0;
+}
+
+
+.biom-title {
+    font-size: 18px;
+    line-height: 25px;
+    padding: 0 10px;
+}
+
+.biom-value {
+    font-size: 20px;
+    /* TODO: important to re check */
+    text-align: left;
+    padding-right: 6px;
+    line-height: 25px;
+    vertical-align: top;
+    font-family: "Open Sans",sans-serif !important;
+}
+
+.biom-value-custom {
+    /*font-size:16px;*/
+    -ms-word-break: break-word;
+    word-break: break-word;
+}
+
+.biom-method, .panel-title .method, .lab-info {
+    font-size: 10px;
+    color: #aaa;
+    padding-top: 4px;
+}
+
+.lab-info {
+    color: #000;
+    display: inline-block;
+    font-weight: bold;
+}
+
+.biom-past {
+    font-size: 12px;
+    text-align: left;
+    color: #aaa;
+    line-height: 25px;
+}
+
+.biom-range {
+    font-size: 12px;
+    text-align: left;
+    line-height: 25px;
+    vertical-align: bottom;
+}
+
+.biom-unit {
+    font-size: 14px;
+    text-align: left;
+    line-height: 25px;
+    vertical-align: top !important;
+    padding-top: 4px !important;
+    /*display:inline-block;*/
+    /*width: 95px;*/
+}
+
+.biom-range {
+    color: #aaa;
+}
+
+.biom-last {
+    color: #aaa;
+    font-size: 12px;
+    text-align: left;
+    line-height: 25px;
+    vertical-align: bottom;
+    position: relative;
+    padding-right: 25px !important;
+}
+
+.risk:not(.green) td {
+    background: #FBEEEE;
+    border-color: #fff;
+}
+
+.risk.green .biom-value {
+    font-family: "Open Sans",sans-serif !important;
+    font-weight: normal !important;
+    color: #555;
+}
+
+.risk .biom-value {
+    font-family: "Open Sans",sans-serif !important;
+    font-weight: bold;
+    color: #E05A5A;
+}
+
+.risk .biom-title {
+    font-weight: bold;
+}
+
+.risk.orange td {
+    background: #FDF1ED;
+
+}
+
+.risk.yellow .biom-value {
+    color: #F7AA2E;
+    font-family: "Open Sans",sans-serif !important;
+}
+
+.risk.orange .biom-value {
+    /*font-weight: normal;*/
+    color: #EE734E;
+    font-family: "Open Sans",sans-serif !important;
+}
+
+.chart-canvas {
+    padding-top: 20px;
+}
+
+
+.biom-bar,
+.biom-range {
+    position: relative;
+}
+
+.bar {
+    display: table;
+    float: right;
+    width: 90px;
+    margin-right: 10px;
+    margin-top: 7px;
+    height: 10px;
+}
+
+.bar > div:first-child {
+    border-radius: 3px 0 0 3px;
+}
+
+.bar > div:last-child {
+    border-radius: 0 3px 3px 0;
+    border-right: 1px solid #00000000;
+}
+
+.risk > td:first-child {
+    border-radius: 4px 0 0 4px;
+}
+
+.risk > td:last-child {
+    border-radius: 0 4px 4px 0;
+}
+
+.panel {
+    margin-bottom: 20px;
+}
+
+
+.segment {
+    display: table-cell;
+    border-right: 1px solid #fff;
+    background: red;
+    opacity: 1;
+}
+
+.segment.green {
+    background: #02D9D1;
+}
+
+.segment.red {
+    background: #E05A5A;
+}
+
+.segment.blue {
+    background: #41B9D6;
+}
+
+.segment.orange {
+    background: #EE734E;
+}
+
+.segment.black {
+    background: #0F0F0F;
+}
+
+.segment.light-blue,
+.segment.lightblue {
+    background: #87B7CE;
+}
+
+.segment.yellow {
+    background: #F7AA2E;
+}
+
+.segment.dark-red,
+.segment.darkred {
+    background: #AD3630;
+}
+
+.segment.light-red,
+.segment.lightred {
+    background: #FB7377;
+}
+
+.segment.current {
+    background-size: contain !important;
+    background-image: url(c.png) !important;
+    background-repeat: no-repeat !important;
+    background-position: 50% 50% !important;
+    opacity: 1;
+}
+
+.footer {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+}
+
+.footer-content {
+    padding: 50px;
+    text-align: right;
+    height: 50px;
+}
+
+.footer .text {
+    float: left;
+    text-align: left;
+    margin-top: 6px;
+    font-size: 12px;
+    color: #7D817E;
+}
+
+.footer .pages {
+    font-size: 15px;
+}
+
+
+.arrow {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background-color: #8099AF;
+    top: 6px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    right: 0;
+
+}
+
+.arrow.up {
+    background-image: url(ar-up.png);
+}
+
+.arrow.down {
+    background-image: url(ar-down.png);
+}
+
+.biom-past {
+    position: relative;
+    padding-left: 15px !important;
+    padding-right: 0 !important;
+}
+
+.arrow.green {
+    background-color: #02D9D1;
+}
+
+.arrow.red {
+    background-color: #E05A5A;
+}
+
+.arrow.orange {
+    background-color: #EE734E;
+}
+
+.card-wrapper {
+}
+
+.card {
+    border-bottom: 2px solid #8099AF44;
+    background: #F2F5F888;
+    border-radius: 10px;
+    margin-bottom: 5px;
+    position: relative;
+    padding-top: 8px;
+    color: #555555;
+    min-height: 60px;
+    display: flex;
+    justify-content: start;
+    align-items: flex-start;
+    page-break-inside: avoid;
+}
+
+.card .text {
+    padding: 14px 0;
+    padding-right: 10px;
+    font-size: 14px;
+    line-height: 1.5em;
+    word-break: break-word;
+}
+
+.insight-text {
+    width: 80% !important;
+    padding: 10px 0;
+}
+
+.insight-disclaimer {
+    width: auto !important;
+    white-space: pre-line;
+    font-style: italic;
+    padding: 5px 82px 0;
+    color: #9c9d9d;
+}
+
+.card .title {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+}
+
+.card.has-related .text {
+    width: 80%;
+}
+
+.card .icon {
+    padding: 10px 20px;
+}
+
+.card .icon img:not(.clinical) {
+    width: auto;
+    filter: grayscale(100%) brightness(.8) opacity(0.8);
+    max-width: 45px;
+}
+
+.clinical {
+    width: 25px !important;
+}
+
+.card.darkred .title,
+.card.dark-red .title,
+.card.red .title {
+    color: #bc2828;
+}
+
+.card.orange .title {
+    color: #FF6E4A;
+}
+
+.card.yellow .title {
+    color: #ffa514;
+}
+
+.card.light-blue .title,
+.card.lightblue .title,
+.card.blue .title {
+    color: #41B9D6;
+}
+
+/*TODO: might need it later*/
+/*.card.yellow .icon img{*/
+/*filter: grayscale(1);*/
+/*}*/
+.card.orange {
+    background: #FFF5E6;
+    border-color: #FFD4C9;
+}
+
+.card.yellow {
+    background: #FFF5E6;
+    border-color: #f9dda9;
+}
+
+.card.green .title {
+    color: inherit;
+}
+
+.card.green {
+    background: #02D9D120;
+    border-color: #02D9D1;
+}
+
+
+.card.cr .icon img {
+    display: none;
+}
+
+.card.cr {
+    border: none;
+    background: none;
+}
+
+.card.cr .text {
+    padding-top: 0;
+    margin-left: 50px;
+}
+
+.card.cr .text span {
+    color: #de0000;
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.hide-me {
+    display: none;
+}
+
+.related-icons {
+    display: flex;
+    padding: 10px 10px 10px 5rem;
+}
+
+.related {
+    height: 44px;
+    display: table;
+    margin-bottom: 5px;
+    margin-left: 5px;
+}
+
+.related .bicon {
+    width: 38px;
+    height: 38px;
+    border: 3px solid #E05A5A;
+    background: #E05A5A30;
+    border-radius: 100px;
+    line-height: 38px;
+    font-size: 10px !important;
+    text-align: center;
+}
+
+.related.orange .bicon {
+    border-color: #EE734E;
+    background-color: #EE734E30;
+}
+
+.related.green .bicon {
+    border-color: #02D9D1;
+    background-color: #ffffff30;
+}
+
+.related.blue .bicon {
+    border-color: #86B6CD;
+    /*border-style: dotted;*/
+    border-width: 3px;
+    background-color: #ffffff30;
+}
+
+.related.yellow .bicon {
+    border-color: #F7AA2E;
+    background: #F7AA2E30;
+}
+
+.related .label {
+    display: table-cell;
+    vertical-align: middle;
+    font-size: 12px;
+    padding-left: 10px;
+    width: 100px;
+    color: #999;
+}
+
+
+/*** GRID ***************************************
+8 cols in page
+each col width is 130px
+*/
+
+.panel-container {
+    width: 1040px;
+    overflow: auto;
+}
+
+.grid-col {
+    overflow: show;
+    float: left;
+}
+
+.grid-row:not(.biomarker-insights) {
+    page-break-inside: avoid;
+}
+
+.grid-row {
+    overflow: show;
+    float: left;
+    margin: 10px 0px;
+    width: 100%;
+    /*page-break-inside: avoid;*/
+}
+
+.grid-col.size1 {
+    width: 130px;
+}
+
+.grid-col.size2 {
+    width: 260px;
+}
+
+.grid-col.size3 {
+    width: 390px;
+}
+
+.grid-col.size4 {
+    width: 520px;
+}
+
+.grid-col.size5 {
+    width: 650px;
+}
+
+.grid-col.size3 {
+    width: 390px;
+}
+
+.page-head .grid-row {
+    margin: 0;
+}
+
+/**************/
+
+
+/*** panel details ************/
+.biom-circle {
+    width: 62px;
+    height: 62px;
+    line-height: 62px;
+    border: 4px solid #02D9D1;
+    background: #ffffff;
+    display: inline-block;
+    border-radius: 100px;
+    font-size: 14px;
+    text-align: center;
+    overflow: hidden;
+    float: left;
+}
+
+.green .biom-circle {
+    border-color: #02D9D1;
+    background-color: #FFFFFF;
+}
+
+.orange .biom-circle {
+    border-color: #EE734E;
+    background-color: #EE734E30;
+}
+
+.red .biom-circle {
+    border-color: #E05A5A;
+    background-color: #E05A5A30;
+}
+
+.yellow .biom-circle {
+    border-color: #F7AA2E;
+    background-color: #F7AA2E30;
+}
+
+.blue .biom-circle {
+    border-color: #86B6CD;
+    background-color: #FFFFFF;
+}
+
+.biom-info {
+    float: left;
+    margin-left: 16px;
+}
+
+.biom-info .title {
+    font-size: 22px;
+    width: 410px;
+    word-break: break-word;
+}
+
+.biom-info .value, .biomarker-extra-value {
+    font-size: 34px;
+    font-weight: 500;
+    line-height: 1;
+    font-family: "Open Sans",sans-serif !important;
+}
+
+.biom-info .unit, .biomarker-extra-unit {
+    font-size: 20px;
+    font-weight: normal;
+}
+
+.red .colorable {
+    color: #E05A5A;
+}
+
+.orange .colorable {
+    color: #EE734E;
+}
+
+.yellow .colorable {
+    color: #F7AA2E;
+}
+
+.green .colorable {
+    color: inherit;
+}
+
+.blue .colorable {
+    color: inherit;
+}
+
+.dark-red .colorablebg,
+.darkred .colorablebg {
+    background-color: #AD3630;
+}
+
+.red .colorablebg {
+    background-color: #E05A5A;
+}
+
+.orange .colorablebg {
+    background-color: #EE734E;
+}
+
+.yellow .colorablebg {
+    background-color: #F7AA2E;
+}
+
+.green .colorablebg {
+    background-color: #02D9D1;
+}
+
+.blue .colorablebg {
+    background-color: #86B6CD;
+}
+
+.biom-info .risk {
+    font-size: 13px;
+    text-transform: uppercase;
+    display: inline-block;
+    border-radius: 5px;
+    background: #F2F5F8;
+    padding: 4px;
+    margin-top: 4px;
+    display: none;
+}
+
+
+/********/
+.biom-bar table {
+    width: 100%;
+    font-size: 13px;
+    table-layout: fixed;
+}
+
+.biom-bar td {
+    padding: 0px;
+    margin: 0px;
+}
+
+.biom-bar .ranges td {
+    vertical-align: bottom;
+    text-align: center;
+}
+
+.biom-bar .labels td {
+    padding-top: 6px;
+    color: #7D817E;
+    vertical-align: top;
+    padding-bottom: 6px;
+    padding-right: 8px;
+}
+
+.biom-bar .labels td.current {
+    font-weight: bold;
+}
+
+.biom-bar .values td {
+    font-family: "Open Sans",sans-serif !important;
+    color: #C4C4C4;
+    vertical-align: top;
+}
+
+.biom-bar table {
+    border-collapse: collapse;
+}
+
+.biom-bar .range {
+    height: 5px;
+    margin-right: 3px;
+}
+
+.biom-bar .current .range {
+    height: 11px;
+}
+
+.biomarker-container .biom-bar .ranges .current::before {
+    background: url(range-arrow.png) no-repeat center;
+    -webkit-background-size: contain;
+    -moz-background-size: contain;
+    -o-background-size: contain;
+    background-size: contain;
+    display: inline-block;
+    content: "";
+    height: 14px;
+    width: 100%;
+    background-position-x: inherit;
+}
+
+/* History graph */
+.biomarker-container .biom-bar.history .ranges .current::before {
+    content: none;
+}
+
+.biom-bar.history .ranges td:not(.current) .range {
+    height: 1px;
+    background: #CCD6DD;
+}
+
+.biom-bar.history .current .range {
+    height: 3px;
+}
+
+.biom-bar.history td {
+    height: 20px;
+}
+
+
+/* insights */
+
+.biomarker-container {
+    overflow: auto;
+    margin-bottom: 10px;
+}
+
+/* signature */
+.signature {
+    page-break-inside: avoid;
+}
+
+.signature img {
+    margin-left: 20px;
+    max-height: 75px;
+}
+
+.stats-card {
+
+    border-radius: 10px;
+    margin-bottom: 5px;
+    position: relative;
+    padding-top: 8px 0px;
+    color: #555555;
+    min-height: 60px;
+    display: flex;
+    justify-content: start;
+    align-items: flex-start;
+    page-break-inside: avoid;
+}
+
+.stat-related-insight-span {
+    width: 84%;
+    padding: 10px 2px;
+}
+
+.related-text {
+    margin-right: 87px;
+}
+
+.chart {
+}
+
+.detailedListContainer {
+    margin-top: 20px !important;
+    margin-bottom: 20px !important;
+}
+
+.detailedList p {
+    padding: 15px 5px;
+}
+
+.detailedList td {
+    padding: 0px !important;
+    text-align: center !important;
+}
+
+.detailed-list > table.detailedList tr td,
+.detailed-list > table.detailedList tr th {
+    border-top: 1px solid rgba(34, 36, 38, .1);
+    border-bottom: 1px solid rgba(34, 36, 38, .1);
+    border-left: 1px solid rgba(34, 36, 38, .1);
+    border-right: 1px solid rgba(34, 36, 38, .1);
+}
+
+table.detailedList {
+    border: none;
+    border-collapse: collapse !important;
+    width: 100%;
+}
+
+.detailed-list > table.detailedList {
+    margin-top: 20px;
+}
+
+.detailedList-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.detailed-list img {
+    position: absolute;
+    left: 2.5%;
+    top: 50%;
+}
+
+.detailedList p {
+    padding: 5px 15px;
+    margin: 0 !important;
+}
+
+.detailedList td {
+    padding: 0px !important;
+    text-align: left !important;
+}
+
+.detailed-list li {
+    page-break-inside: avoid;
+}
+
+.detailed-list > li:first-child {
+    padding-top: 20px;
+}
+
+.detailed-list > li:first-child:before {
+    padding-top: 17px;
+}
+
+.detailed-list {
+    padding-left: 39px;
+    padding-bottom: 20px;
+    background: rgba(2, 217, 209, 0.1);
+    font-size: 14px;
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    page-break-inside: auto;
+    color: #212121;
+    border-radius: 5px;
+    margin-top: 10px;
+}
+
+/*table { page-break-inside:auto }*/
+/*tr    { page-break-inside:avoid; page-break-after:auto }*/
+
+ul {
+    /*page-break-inside:auto;*/
+}
+
+li {
+    /*page-break-inside:auto;*/
+}
+
+.card-wrapper {
+    /*page-break-inside:auto;*/
+}
+
+/*.detailed-list li  ul{*/
+/*list-style-image: url('arrow-down-sign-to-navigate.png');*/
+/*background-size:20px;*/
+/*width:20px;*/
+/*height: 20px;*/
+/*}*/
+
+.inner, .outer {
+    padding: 8px;
+}
+
+.outer {
+    padding-left: 20px;
+    page-break-inside: auto;
+}
+
+.inner {
+    page-break-inside: avoid;
+    position: relative;
+}
+
+.inner:before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #222;
+    position: absolute;
+    left: -1%;
+    top: 30%;
+}
+
+/*.detailed-list ul li{*/
+/*list-style: none;*/
+/*position: relative;*/
+/*}*/
+/*.detailed-list ul li :before{*/
+/*content: '';*/
+/*display: inline-block;*/
+/*height: 8px;*/
+/*width: 8px;*/
+/*!*background-image: url('arrow-down-icon-png-26.jpg');*!*/
+/*position: absolute;*/
+/*left: 0;*/
+/*top:25%;*/
+/*}*/
+
+.detailed-list li {
+    padding: 4px;
+    list-style: disc;
+}
+
+.detailed-list li:not(.arrow-icon) {
+    /*list-style-image:url('small-circle.png') !important;*/
+    list-style: none;
+    position: relative;
+}
+
+.detailed-list li:not(.arrow-icon):before {
+    content: '●';
+    font-size: 12px;
+    line-height: 20px;
+    padding-right: 10px;
+    position: absolute;
+    left: -13px;
+    top: 1px;
+}
+
+li.arrow-icon {
+    list-style-image: url('small-down-arrow.png') !important;
+    margin-left: 8px;
+    text-indent: -8px;
+    font-weight: bold;
+}
+
+.arrow-icon + ul {
+    padding-left: 25px;
+}
+
+/*.detailed-list ul li.arrow-icon{*/
+/*list-style-image: url('Webp.net-resizeimage.png') !important;*/
+/*}*/
+.extra-range-placeholder {
+    margin-top: 40px;
+}
+
+.biomarker-container .extra-range-placeholder {
+    padding-top: 10px;
+}
+
+.biomarker-container .range-placeholder:first-child {
+    margin-top: 20px;
+    padding-top: 10px;
+}
+
+.biomarker-container .range-placeholder:last-child {
+    margin-bottom: 20px;
+}
+
+.val-height-1 {
+    line-height: 1 !important;
+}
+
+.val-height-2 {
+    line-height: 2 !important;
+}
+
+.val-height-3 {
+    line-height: 2.4 !important;
+    margin-top: -20px;
+}
+
+.range-placeholder.has-ranges {
+    margin-top: 60px !important;
+}
+
+/*.biomarker-container.hide-flag .should-hide ,*/
+/*.biomarker-container.hide-flag .range-placeholder{*/
+/*display:none;*/
+/*}*/
+.biomarker-container.hide-flag .pair {
+    margin-bottom: 60px;
+    padding-bottom: 20px;
+    direction: ltr;
+    text-align: left;
+
+}
+
+.biomarker-container .biom-bar {
+    margin-top: 60px;
+}
+
+.biomarker .title.has-ranges {
+    margin: 20px 0 !important;
+}
+
+.biomarker .title.has-no-ranges {
+    margin: 20px 0 !important;
+}
+
+.hide-flag .parent-pair,
+.biomarker-container.hide-flag .range-placeholder,
+.hide-flag .biom-parent-value,
+.hide-flag .biom-parent-unit,
+.hide-flag .parent-reference-range,
+.hide-flag .biom-parent-value + br {
+    display: none;
+}
+
+.small-fontSize-circle {
+    font-size: 9px !important;
+}
+
+.bicon-inner {
+    line-height: normal;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.min-pdf .biom-circle {
+    border-color: grey;
+}
+
+.min-pdf .biom-circle {
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    font-size: 20px;
+}
+
+.min-pdf .biomarker-container {
+    width: 25%;
+    float: left;
+    overflow: hidden;
+}
+
+.biomarker-min {
+    width: 25%;
+    display: flex;
+    justify-content: center;
+    float: left;
+    margin-bottom: 40px;
+}
+
+.doctor-only-content-header {
+    margin-bottom: 0;
+}
+
+.word-break-normal {
+    word-break: normal;
+}
+
+.doctor-only-content-container {
+    page-break-inside: avoid;
+    page-break-before: auto;
+}
+
+.detailed-list-title-wrapper {
+    page-break-inside: avoid;
+}
+
+.hide-scale .range-placeholder,
+.hide-scale .extra-range-placeholder {
+    display: none;
+}
+
+.tolerance-text {
+    color: red;
+    font-size: 14px;
+    margin: 0 10px 10px 10px;
+}
+
+.remove-line-height > td {
+    line-height: 1px !important;
+    padding: 0 !important;
+}
+
+div#report-summary {
+    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
+    padding: 15px 15px;
+    border-radius: .28571429rem;
+    margin: 15px 0;
+}
+
+.resume-title.report-summary-title,
+.resume-title.report-properties-title {
+    font-size: 20px;
+    margin: 15px 0 15px;
+    padding: 0 0 5px;
+}
+
+.panels-header .biom-range {
+    padding-right: 20px;
+}
+
+.listing .biom-unit {
+    width: 10%;
+}
+
+.panels-header .biom-past {
+    white-space: nowrap;
+}
+
+.panels-header .biom-range {
+    width: 120px !important;
+}
+
+.listing .biom-last,
+.listing .biom-past,
+.listing .biom-range {
+    width: 100px !important;
+}
+
+.small-value-font-size {
+
+    font-size: 14px;
+
+}
+
+.biomarker-container .grid-row.biomarker-insights .card-wrapper .text {
+    width: 80%;
+}
+
+.parent-reference-range,
+.child-referene-range {
+    color: #666;
+    font-size: 15px;
+    font-family: "Open Sans",sans-serif !important;
+}
+
+.panel-subtitle {
+    font-size: 20px;
+    color: #8099AF;
+    padding: 10px 0;
+}
+
+.panel-subtitle-item {
+    font-size: 20px;
+    border-bottom: 1px solid #CCD6DD;
+    background: #F2F5F8AA;
+    color: #8099AF;
+    padding: 7px 10px;
+    font-weight: 300;
+    border-radius: 10px 10px 0 0;
+    margin-bottom: 4px;
+    margin-left: -10px;
+    margin-right: 0;
+    display: block;
+    page-break-inside: avoid;
+    margin-bottom: 10px;
+}
+
+.insight-card {
+    display: block !important;
+}
+
+.insight-container {
+    display: flex;
+}
+
+.from-doctor {
+    padding-bottom: 6px;
+    font-weight: 600;
+}
+
+.signature-image,
+.stamp-image {
+    float: left;
+}
+
+.stamp-image {
+    max-height: unset !important;
+    height: 100px;
+    width: 100px
+}
+
+.section.panel {
+    width: 100%;
+    float: left;
+}
+
+/* Details Section */
+.section.new-page#details-section {
+    width: 100%;
+}
+
+.no-border-bottom > td {
+    border-bottom: none !important;
+}
+.pdf-wrapper {
+    width: 100%;
+    page-break-before: auto;
+    float: left;
+    margin-top: 15px;
+}
+.panel-wrapper{
+    page-break-inside: avoid;
+}
+div#summary {
+    float: left;
+    width: 100%;
+    page-break-inside: avoid;
+}