@font-face {
    font-family: 'TitleFont'; /*a name to be used later*/
    src: url('../font/Brother-1816-Black.otf'); /*URL to font*/
}

@font-face {
    font-family: 'Roboto'; /*a name to be used later*/
    src: url('../font/Roboto-Regular.ttf'); /*URL to font*/
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto'; /*a name to be used later*/
    src: url('../font/Roboto-Bold.ttf'); /*URL to font*/
    font-weight: bold;
    font-style: normal;
}

@media (min-width: 768px) {
  html {
    font-size: 12pt;
  }
}

@media screen and (max-width: 768px) {
    nav {
        display: none;
    }

    #mainContent {
        margin-left: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.pdf-footer {
    display: none;
}

/********************************************************************************************************
**
**    PRINT
**
***************/
@page {
    size: A4 portrait;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: /*1rem*/;
    /*margin-bottom: 50px;*/
    margin-bottom: 0;
    margin-top: 0;
    -webkit-print-color-adjust: exact;
    position: relative;
}

/*@page {
    @bottom-right {
        content: url('../img/ZeroCarbonServices_Logo_Blue.png');
    }
}*/

@media print {
    #main-title-page {
        height: 100%;
    }

    .pdf-footer {
        display: block;
        position: fixed;
        bottom: 0;
        right: 0;
    }

    .pdf-footer img {
        height: 75px;
        padding-bottom: 10px;
        padding-right: 10px;
    }

    * {
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
        print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
    }

    html, body {
        width: 210mm;
        height: 297mm;
        padding: 0 !important;
        min-width: 210mm;
    }

    .container {
        width: auto;
        min-width: 768px;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    html {
        font-size: 11pt;
    }

    body {
        margin: 0;
    }

    .side-bar {
        display: none;
    }

    .container, .container-xxl {
        margin-left: 0;
        margin-right: 0;
    }

    nav, .navbar {
        display: none;
    }

    .wow {
        animation-name: none !important;
        visibility: visible !important;
    }

    #mainContent {
        margin-left: 0;
    }

    #backToTop, #openSideBar {
        display: none;
    }

    section, .section_black_page {
        /*break-after: page;*/
        break-inside: avoid;
        margin-top: 0;
        padding-top: 0;
    }

    .section_title {
        padding-top: 1rem;
        /*break-before:page;*/
    }

    .section_black_page_title {
        break-after: avoid;
        margin-top: 0;
        padding-top: 0;
    }

    .donutchart-table {
        width: 100% !important;
        break-inside: avoid;
    }
    .donutchart-table-print-adjust {
        margin-top: 140px;
    }

    #donutchart1 {
        width: 100% !important;
    }

    #donutchart2 {
        width: 210mm !important;
    }

    .recommendation {
        break-inside: avoid;
        padding-top: 1rem;
        padding-bottom: 0;
    }
    /*    .section_black_page {
        padding-top: 50vh;
        padding-bottom: 50vh;
    }*/

    .card-body > p {
        font-size: 9pt !important;
    }

    .card {
        
        padding-bottom: 0;
    }

    .sticker {
        width: 70% !important;
    }

    .pagebreak {
        break-after: page;
    }

    footer {
        display: none;
    }

    .hide-for-print {
        display: none;
    }

}
/*************** END PRINT *****************/

html, body, html * {
  font-family: 'Roboto', sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin-bottom: 60px;
    /*font-family: 'Roboto', 'Montserrat', sans-serif;*/
}

.sticker {
    height: 100%;
    width: 100%;
    object-fit: contain
}

.dot {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}
    .dot.cutCost {
        background-color: #e15e60;
    }
    .dot.enhanceBrand {
        background-color: #5a71b0;
    }
    .dot.buildResilience {
        background-color: #359ca0;
    }
    .dot.yes {
        background-color: #38af58;
    }

    .dot.no {
        background-color: #f30019;
    }

    .dot.inProcess {
        background-color: #f8bf37;
    }

.navbar-brand {
    font-family: 'TitleFont';
}

.company-name {
    font-family: 'TitleFont';
    color: black;
    font-size: 1.25rem;
}
.main_title {
    font-family: 'TitleFont';
    text-transform: uppercase;
    font-kerning: normal;
    color: black;
    font-size: 50pt;
    line-height: 1;
}

.main_subtitle {
    font-family: 'TitleFont';
    text-transform: uppercase;
    font-kerning: normal;
    color: #546fb4;
    font-size: 50pt;
    line-height: 1;
}

.section_title {
    display: flex;
    justify-content: left;
    align-items: center;
    padding-bottom: 2rem;
}

h1 {
    line-height: 1;
}

h1.underlined_title {
    font-family: 'TitleFont';
    text-transform: uppercase;
    font-kerning: normal;
    color: black;
    font-size: 42pt;
    z-index: 1;
    position: relative;
}
h1.underlined_title_white {
    font-family: 'TitleFont';
    text-transform: uppercase;
    font-kerning: normal;
    color: white;
    font-size: 55pt;
    z-index: 1;
    position: relative;
}

h1::before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: 10px;
    background: linear-gradient(111.3deg, #5074b9 9.6%, #f26662 93.6%);
}

h2 {
    font-family: 'TitleFont';
    text-transform: uppercase;
    font-kerning: normal;
    color: black;
    font-size: 24pt;
}

h3 {
    font-family: 'TitleFont';
    text-transform: uppercase;
    font-kerning: normal;
    color: black;
    font-size: 18pt;
}

h4 {
    font-family: 'TitleFont';
    text-transform: uppercase;
    font-kerning: normal;
    color: #F26662;
    font-size: 16pt;
}

p {
    text-align: justify;
    text-justify: auto;
}

.section_black_page {
    background-color: black;
    padding-top: 200px;
    padding-bottom: 300px;
    padding-left: 50px;
    margin-left: 0px;
}

.section_black_page_title {
    background-size: cover !important;
    margin-bottom: 10pt;
    padding-bottom: 100px;
    margin-top: 2rem;
}

.small_brand_text {
    font-family: 'TitleFont';
    text-transform: uppercase;
    font-kerning: normal;
    color: black;
}

.huge_doublequotes {
    font-family: 'TitleFont';
    color: black;
    font-size: 80pt;
    margin-bottom: -60pt;
    margin-top: -20pt;
}
.person-container {
    display: flex;
    align-items: center;
    justify-content: left;
}

.person-image {
    flex-basis: 150px;
}

.person-text {
    font-size: 12pt;
    padding-left: 20px;
}

.card-body > p {
    font-size: 11pt;
}


.recommendation {
    padding: 2rem 0rem 1rem 0rem;
}

.category_statistics {
    margin-bottom: 0px;
    padding-bottom: 2rem;
    text-align:left;
}
/* horizontal lines*/
.category_statistics::before, .category_statistics::after {
    content: "";
    width: 100%;
    height: 0;
    border: 1px solid black;
    margin: 3px;
    display: inline-block;
}

.side-bar {
    background-color: white;
    width: 270px;
    height: 92vh;
    position: fixed;
    display: flex;
    flex-direction: column;
    /*    align-items: left;
    justify-content: top;*/
    transition: 0.5s;
    font-size: 10pt;
    overflow: auto;
}

.brewing_table {
   padding-bottom: 3rem;
}

.brewing_table_percents {
    display: inline-block;
    white-space: nowrap;
    padding-left: 1rem;
}


.donutchart-table {
    border-collapse: collapse;
    width: 750px;/*80%;*/
    padding-bottom: 2rem;
}
.donutchart-table table {
    width: 100%;
}
    .donutchart-table th {
        text-align: center;
    }
.donutchart-table tr,th {
    border-bottom: 2px solid #000200;
}

.donutchart-table tr:last-child {
    border: none;
}
.donutchart-table td,th {
    border-right: 2px solid #000200;
}

.donutchart-table td:last-child, th:last-child {
    border-right: none;
}

    .donutchart-table td:nth-child(1) {
        width: 60%;
        text-align: left;
    }

    .donutchart-table td:nth-child(2) {
        width: 15%;
        text-align: center;
    }

    .donutchart-table td:nth-child(3) {
        width: 15%;
        text-align: center;
    }


.carbon-down-to-zero {
    font-family: 'TitleFont';
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 1000px;
    background: linear-gradient(111.3deg, #5074b9 9.6%, #f26662 93.6%);
}

.sources-container {
    column-count: 2;
    column-gap: 20px;
}
.sources-heading {
    font-weight: bold;
}
.sources-links{
    font-size: 9pt;
    padding-bottom: 1rem;
}

.sources-links > a::after {
    content: "\a";
    white-space: pre;
}

nav ul {
    padding: 0;
}

nav li {
    list-style: none;
}

    nav li a {
        text-decoration: none;
        color: #333;
        display: block;
        padding: 0.2rem 0.3rem;
        font-weight: 400;
        transition: all ease-out 250ms;
        line-height: 1.1;
    }

        nav li a:hover {
            /*color: grey;*/
            background-color: #768bc3;
            color: white;
        }

        .important-link {
            font-weight: bold;
        }

.main-content {
    margin-left: 270px;
    transition: margin-left .5s;
}

section {
    /* height: 90vh;*/
    margin: 0;
    padding: 0rem 0rem 0rem 0rem;
    overflow: hidden;
}

    /*    section:nth-of-type(2n) {
                        background-color: #ccc;
                    }*/

/*    section:last-of-type {
        height: 100vh;
    }*/


.active {
    color: white;
    font-weight: 600;
    background-color: #5074B9;
}

.hidden {
    display: none;
}

.icon-table {
    border-collapse: collapse;
    margin-left: 2rem;
}

.icon-table tr {
    border-bottom: 2px solid #F26662;
}
.icon-table tr:last-child {
    border: none;
}

    .icon-table tr:first-child td:nth-child(2) {
        /*vertical-align: text-top;*/
        padding-bottom: 0.4rem;
    }
    .icon-table tr:first-child td:nth-child(3) {
        /*vertical-align: text-top;*/
        padding-bottom: 0.4rem;
    }

.icon-table tr:nth-child(1) > td:nth-child(1) > img {
    padding-top: 0;
    margin-top: 0;
}

.icon-table td img {
    width: 30px;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.icon-table td:nth-child(1) {
    width: 50px;
    text-align: left;
}

.icon-table td:nth-child(2) {
   /* border-right: 2px dashed #000;*/
    
    /*width:120px;*/
}

.icon-table td:nth-child(3) {
    padding-left: 5px;
    font-weight: bold;
    width: 40%;
}


.card {
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 0 !important;
}

.card-title {
    text-align: left;
    line-height: 1;
}

.card-body {
    padding-bottom: 0;
}

#openSideBar {
    position: fixed;
    top: 65px;
    left: 10px;
}

#backToTop {
    position: fixed;
    top: 95%;
    right: 5px;
}

.btn-primary {
    background-color: #5074B9;
    border-color: #5074B9;
}

.btn-primary:hover {
    background-color: #F26662;
    border-color: #F26662;
}

.hide {
    opacity: 0;
}

.show {
    opacity: 1;
}

/*.chart-group::before {
    content: "";
    width: 100%;
    height: 2px;
    margin: 5px;
    display: inline-block;
    background: linear-gradient(111.3deg, #5074b9 9.6%, #f26662 93.6%);
}*/

.chart-group {
    padding-bottom: 50px;
}

/*.gradient-line::before {
    content: "";
    width: 100%;
    height: 4px;
    margin: 5px;
    display: inline-block;
    background: linear-gradient(111.3deg, #5074b9 9.6%, #f26662 93.6%);
}*/

.currentDocument {
    text-decoration: underline;
    text-decoration-color: #5876b6;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

.detailedFootprintChart .apexcharts-legend-series {
    width: 100%;
}

/*#barChart-ActionUndertakenCutByInitiative .apexcharts-yaxis-label {
    cursor: pointer;
    color: blue;
}*/

.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
    /*pointer-events: none;*/
}

.isDisabled > a {
    color: currentColor;
    display: inline-block; /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
    pointer-events: none;
}