@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;
}