﻿@import url("//hello.myfonts.net/count/373b36");

@font-face {
    font-family: 'AvenirLTStd-Book';
    src: url('../fonts/373B36_2_0.eot');
    src: url('../fonts/373B36_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/373B36_2_0.woff2') format('woff2'),url('../fonts/373B36_2_0.woff') format('woff'),url('../fonts/373B36_2_0.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirLTStd-Roman';
    src: url('../fonts/373B36_4_0.eot');
    src: url('../fonts/373B36_4_0.eot?#iefix') format('embedded-opentype'),url('../fonts/373B36_4_0.woff2') format('woff2'),url('../fonts/373B36_4_0.woff') format('woff'),url('../fonts/373B36_4_0.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirLTStd-Oblique';
    src: url('../fonts/373B36_5_0.eot');
    src: url('../fonts/373B36_5_0.eot?#iefix') format('embedded-opentype'),url('../fonts/373B36_5_0.woff2') format('woff2'),url('../fonts/373B36_5_0.woff') format('woff'),url('../fonts/373B36_5_0.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirLTStd-Medium';
    src: url('../fonts/373B36_6_0.eot');
    src: url('../fonts/373B36_6_0.eot?#iefix') format('embedded-opentype'),url('../fonts/373B36_6_0.woff2') format('woff2'),url('../fonts/373B36_6_0.woff') format('woff'),url('../fonts/373B36_6_0.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirLTStd-MediumOblique';
    src: url('../fonts/373B36_7_0.eot');
    src: url('../fonts/373B36_7_0.eot?#iefix') format('embedded-opentype'),url('../fonts/373B36_7_0.woff2') format('woff2'),url('../fonts/373B36_7_0.woff') format('woff'),url('../fonts/373B36_7_0.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirLTStd-Heavy';
    src: url('../fonts/373B36_8_0.eot');
    src: url('../fonts/373B36_8_0.eot?#iefix') format('embedded-opentype'),url('../fonts/373B36_8_0.woff2') format('woff2'),url('../fonts/373B36_8_0.woff') format('woff'),url('../fonts/373B36_8_0.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirLTStd-Black';
    src: url('../fonts/373B36_A_0.eot');
    src: url('../fonts/373B36_A_0.eot?#iefix') format('embedded-opentype'),url('../fonts/373B36_A_0.woff2') format('woff2'),url('../fonts/373B36_A_0.woff') format('woff'),url('../fonts/373B36_A_0.ttf') format('truetype');
}

@media print, screen {

    :root {
        --ltrBlue: 0,171,190;
        --ltrDk: 0,95,110;
        --default: 34,30,31;
        --pageBg: 255,255,255;
        /* color 1 - grey */
        --color1: 74,95,111;
        /* color 2 - lt grey */
        --color2: 137,156,168;
        /* color 3 - red */
        --color3: 198,59,60;
        /* color 4 - purple */
        --color4: 137,109,169;
    }

    /* Box sizing rules */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body,
    page,
    header,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
        font-weight: normal;
    }

    ul[role='list'],
    ol[role='list'] {
        list-style: none;
    }

    html:focus-within {
        scroll-behavior: smooth;
    }

    body {
        min-height: 100vh;
        text-rendering: optimizeSpeed;
        line-height: 1.5;
    }

    a:not([class]) {
        text-decoration-skip-ink: auto;
    }

    img,
    picture {
        max-width: 100%;
        display: block;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    .clear {
        clear: both;
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
    }

    /* page rules */

    body {
        padding: 0;
        letter-spacing: -0.03rem;
        line-height: 1.3;
    }

    .empty {
        position: relative;
        font-family: 'AvenirLTStd-Roman', sans-serif;
        font-size: 12pt;
        width: 297mm;
        height: auto;
        page-break-after: always;
        overflow: hidden !important;
    }


    .page {
        position: relative;
        font-family: 'AvenirLTStd-Roman', sans-serif;
        font-size: 10pt;
        color: #000;
        width: 297mm;
        height: 209.8mm;
        page-break-after: always;
        overflow: hidden !important;
        background-color: rgb(var(--pageBg));
    }

    h1 {
        font-family: 'AvenirLTStd-Heavy', sans-serif;
        font-size: 19pt;
        color: #fff;
    }

        h1 span {
            color: rgb(var(--ltrBlue));
        }

    h2 {
        font-family: 'AvenirLTStd-Heavy', sans-serif;
        font-size: 22pt;
    }

        h2 span {
            font-family: 'AvenirLTStd-Roman', sans-serif;
        }

    h3 {
        font-family: 'AvenirLTStd-Heavy', sans-serif;
        font-size: 17pt;
        margin-bottom: 5mm;
        line-height: 1.1;
    }
        h3 small {
            font-size: 12pt;
        }

    p {
        font-size: 15pt;
        line-height: 1.4;
        color: rgb(var(--default));
    }
        p.footnote {
            font-family: 'AvenirLTStd-Heavy', sans-serif;
            font-size: 12pt;
        }
    strong {
        font-family: 'AvenirLTStd-Heavy', sans-serif;
        font-weight: normal;
    }

    .bg1 {
        background: rgb(var(--color1));
        color: #fff !important;
    }

    .bg2 {
        background: rgb(var(--color2));
        color: #fff !important;
    }

    .bg3 {
        background: rgb(var(--color3));
        color: #fff !important;
    }

    .bg4 {
        background: rgb(var(--color4));
        color: #fff !important;
    }

    .bgLtr {
        background: rgb(var(--ltrBlue));
        color: #fff !important;
    }

    .bgLtrDk {
        background: rgb(var(--ltrDk));
        color: #fff !important;
    }

    .bgFb {
        background: #214489;
        color: #fff !important;
    }

    .bgIn {
        background: #c34298;
        color: #fff !important;
    }

    .bgLi {
        background: #2c6a9c;
        color: #fff !important;
    }

    .bgTw {
        background: #4fb0e3;
        color: #fff !important;
    }

    .color1 {
        color: rgb(var(--color1));
    }

    .color2 {
        color: rgb(var(--color2));
    }

    .color3 {
        color: rgb(var(--color3));
    }

    .color4 {
        color: rgb(var(--color4));
    }

    .tint1 {
        background: rgba(var(--ltrBlue),0.9);
        color: #fff !important;
    }

    .tint2 {
        background: rgba(var(--ltrBlue),1);
        color: #fff !important;
    }

    .tint3 {
        background: rgba(var(--color1),0.7);
        color: #fff !important;
    }

    .tint4 {
        background: rgba(var(--color1),0.85);
        color: #fff !important;
    }

    .tintLtr {
        background: rgba(var(--ltrBlue),0.3);
        color: rgb(var(--ltrBlue)) !important;
    }

    .divider {
        position: absolute;
        display: block;
        width: 220mm;
        height: 0.8mm;
        background: rgb(var(--ltrBlue));
    }

    .titleIcon {
        display: inline;
        vertical-align: baseline;
        height: 5mm;
        width: auto;
        margin-right: 3mm;
        transform: translateY(0.4mm)
    }

    .miniIcon {
        display: inline;
        vertical-align: baseline;
        height: 5mm;
        width: auto;
        margin-right: 1mm;
        transform: translateY(0.4mm)
    }

    /* cover */

    .page.cover {
        background: #192733 url("/images/report-cover/blue-cover.png") 0 100% no-repeat;
        background-size: cover;
    }

    .logo {
        position: absolute;
    }

        .logo img {
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            object-fit: cover;
        }

    #coverlogo {
        left: 89.794mm;
        bottom: 16.276mm;
        width: 40.76mm;
        height: 18.178mm;
    }

    #coverClientlogo {
        left: 14.879mm;
        bottom: 16.276mm;
        width: 59mm;
    }

        #coverClientlogo img {
            filter: brightness(0) invert(1);
        }
        #coverClientlogo img.noFilter {
            filter: none;
        }

    .page.cover h1 {
        position: absolute;
        display: block;
        bottom: 14mm;
        right: 18.954mm;
    }

    /* pages */

    div.header {
        position: relative;
        padding: 0;
        width: 297mm;
        height: 62mm;
        z-index: 100;
        box-sizing: border-box;
    }
        .page.additional div.header {
            height: 30mm;
        }

    .header .logo.ltr {
        top: 15mm;
        left: auto;
        right: 13.5mm;
        width: 43.526mm;
        height: 18.736mm
    }

    .header .divider {
        left: 13.5mm;
        top: 32.7mm;
    }

    .header h2 {
        position: absolute;
        left: 13.5mm;
        top: 45.351mm;
        width: 215mm;
    }

    .main {
        position: absolute;
        top: 68mm;
        left: 13.5mm;
        width: 267mm;
        height: 119mm;
        z-index: 1;
    }
        .page.additional .main {
            top: 36mm;
        }

    .flexrow {
        width: 220mm;
        display: flex;
        justify-content: space-between;
        margin-bottom: 12mm;
    }
        .flexrow.wide,
        .flexrow.text {
            width: 100%;
        }

    .flexitem {
        margin-right: 6mm;
    }
        .flexrow.text .flexitem:first-child {
            flex: 1 1 30%;
            margin-right: 16mm;
        }
        .flexrow.text .flexitem:nth-child(2) {
            flex: 1 1 30%;
        }
        .flexrow.text .flexitem:last-child {
            flex: 1 1 40%;
        }

        .flexitem:last-child {
            margin-right: 0;
        }

    .iconStat {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-left: 1px solid #000;
        padding-left: 5mm;
    }

    .icon {
        height: 20mm;
        margin-right: 4mm;
    }

        .icon img {
            object-fit: contain;
            height: 100%
        }

    .stat {
        font-family: 'AvenirLTStd-Heavy', sans-serif;
        font-size: 28pt;
        line-height: 1;
        align-self: flex-end;
    }
        .stat.qualified {
            align-self: center;
            line-height: 0.8;
        }
        .stat.qualified span {
            display: inline-block;
            font-size: 13pt;
            padding: 2.2mm 2.2mm 1.7mm;
        }

    table {
        margin-top: 7mm;
    }

        table td, table th {
            font-family: 'AvenirLTStd-Medium', sans-serif;
            font-weight: normal;
            text-align: right;
            border-bottom: 0.2mm solid #000;
            padding: 1.6mm 2.4mm 1mm;
            font-size: 1.05em;
        }

        table th {
            font-family: 'AvenirLTStd-Heavy', sans-serif;
            text-align: left;
            color: var(--default);
            padding: 1.6mm 2.4mm 1.4mm;
        }

        table tr td:last-child, table tr th:last-child {
            border-right: none;
        }

        table td.head {
            width: 36mm;
            font-size: 14pt;
            vertical-align: top;
        }

        table th[class*="bg"],
        table td[class*="tint"] {
            border-bottom: 0.2mm solid #fff;
        }

        table tr.total td {
            font-family: 'AvenirLTStd-Heavy', sans-serif;
            border-width: 0.6mm !important;
            border-top: 0.4mm solid #000 !important;
        }

            table tr.total td[class*="tint"] {
                border-top: 0.4mm solid #fff !important;
            }

        table tr:last-child td {
            border-bottom: none !important;
        }

        table td.lgTxt {
            font-size: 28pt;
        }

        table td.bRight, table th.bRight {
            border-right: 0.6mm solid #fff !important;
        }

        table th img {
            display: inline;
            vertical-align: baseline;
            height: 3.5mm;
            width: auto;
            margin-right: 1.5mm;
            transform: translateY(0.35mm);
            filter: brightness(0) invert(1);
        }

        table .center {
            text-align: center
        }

        table .left {
            text-align: left
        }

    .footer .divider {
        left: 0;
        bottom: 2mm;
    }

    .footer {
        position: absolute;
        left: 12mm;
        bottom: 10mm;
        width: 273mm;
    }

        .footer #date {
            padding-top: 2mm;
        }

            .footer #date p {
                display: inline-block;
                position: absolute;
                bottom: 0.5mm;
                right: 0;
                z-index: 2;
                text-align: right;
                font-size: 0.9em;
                color: #009cb6;
                background: #fff;
                padding-left: 2mm;
            }

    .button {
        display: none;
    }
}

@media only screen {
    body {
        background: #333;
        margin: 30px;
    }

    .page {
        margin: 0 auto 30px;
        box-shadow: 0 0 15px 0px rgba(0,0,0,0.7);
    }

    .empty {
        margin: 0 auto 30px;
    }
    .empty p {
        color: #fff;
        margin-bottom: 20px;
    }
    .empty select {
        padding: 10px 5px;
        border-radius: 3px;
        background: #fff;
        border: none;
    }
        .empty select:focus {
            outline: none !important
        }

    .button {
        font-family: 'AvenirLTStd-Roman', sans-serif;
        font-size: 1.3em;
        font-weight: 500;
        line-height: 1.35;
        text-align: center;
        background: rgb(var(--ltrBlue));
        color: #fff;
        display: block;
        width: 300px;
        text-decoration: none;
        cursor: pointer;
        padding: 0.6em 1.1em;
        transition: background-color 0.2s ease-out, color 0.2s ease-out, border 0.2s ease-out;
        -webkit-appearance: none;
        box-sizing: border-box;
        border-radius: 0.4em;
        margin: 30px auto 60px;
    }

        .button:hover {
            background: #fff;
            color: rgb(var(--ltrBlue));
        }
}
@media only print {
    .empty {
        display: none;
    }
}