:root {
    --pdf-yellow: #FFEB3B;
    --pdf-orange: #FF8C00;
    --pdf-blue: #2196F3;
    --pdf-green: #04AA6D;
    --pdf-black: #232323;
    --pdf-white: #ffffff;
    --pdf-red: #f44336;
    --pdf-gray: #a0a0a0;
    --pdf-lightgray: #bbbbbb;
    --pdf-header-color: var(--pdf-black);
    --pdf-header-version-color: var(--pdf-blue);
    --pdf-header-logo-size: 5em;
    --pdf-company-info-icon-color: var(--pdf-blue);
    --pdf-report-space: 0.25in;
}

/* #region header-content */
.header-content-pdf {
    line-height: 1;
    color: var(--pdf-header-color);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: min-content min-content;
    grid-template-areas:
        "company   .         logo"
        "version   title     logo";
}

    .header-content-pdf .company {
        grid-area: company;
        font-weight: normal;
        align-self: start;
    }

    .header-content-pdf .logo {
        grid-area: logo;
        overflow: hidden;
        border-radius: 0.4em;
        height: var(--pdf-header-logo-size);
        width: var(--pdf-header-logo-size);
        align-content: center;
        border-radius: 0.5rem;
        object-fit: contain;
        display: block;
    }

    .header-content-pdf .title-plcaeholder {
        grid-row: 2;
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        align-self: end;
        column-gap: 0.5em;
    }


    .header-content-pdf .version {
        grid-area: version;
        justify-self: start;
        align-self: end;
        font-size: 0.8em;
        color: var(--pdf-header-version-color);
    }
/* #endregion */

/* #region company-info */
.company-info-pdf {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: row wrap;
    font-size: 0.8em;
    column-gap: 2px;
    row-gap: 0.25em;
}

    .company-info-pdf .company-info-item {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .company-info-pdf .company-info-icon {
        fill: var(--pdf-company-info-icon-color);
        width: 1.35em;
    }

        .company-info-pdf .company-info-icon.location {
            width: 1.1em;
            margin-block-end: 3px;
        }
/* #endregion */
