:root {
    --base-font-size: 16;
}

html, body {
  height: 100%; /* Ensure the body takes the full height of the screen */
  margin: 0;    /* Remove default margin */
  min-height: 600px; /* Set the minimum height to 600px */
}

body {
  display: flex;
  flex-direction: column;
}

/* ------------------------------ */

.disclaimerScrollable::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
    width: 12px;
    margin-top: 20px;
}

.disclaimerScrollable::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
    /* border-radius: 10px;
    background-color:#fff;
    -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7); */
    border-radius: 10px;
    background: var(--Mithril-Silver, #BBBBC2);

}

.disclaimerScrollable::-webkit-scrollbar-button:start:increment {
    height: 8%;
}

/* ------------------------------ */

.rotate90 {
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    transition: transform 0.15s ease-in-out;
}

.xButton {
    cursor: pointer;
    margin-top: -40px;
    margin-right: -10px;
}

@media (hover: hover) {
    .xButton:hover svg>circle {
        fill: rgba(0, 0, 0, 0.75);
    }
}

/* ------------------------------ */

#chartdiv {
    top: 70px; /* remember also: height: calc(100% - 70px); */
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    min-width: 375px;
    height: calc(100% - 70px);
}

@font-face {
    font-family: "Avenir Light";
    src: url(../assets/fonts/AvenirLTPro-Light.otf) format("opentype")
}

@font-face {
    font-family: "Avenir Medium";
    src: url(../assets/fonts/AvenirLTPro-Medium.otf) format("opentype")
}

@font-face {
    font-family: "Avenir Book";
    src: url(../assets/fonts/AvenirLTPro-Book.otf) format("opentype")
}

@font-face {
    font-family: "Avenir Heavy";
    src: url(../assets/fonts/AvenirLTPro-Heavy.otf) format("opentype")
}

@font-face {
    font-family: "Avenir Black";
    src: url(../assets/fonts/AvenirLTPro-Black.otf) format("opentype")
}

body {
    background-color: #000;
    color: #FFF;
    min-width: 375px;
}

.backgroundBlack {
    background-color: #000;
    z-index: 3;
}

#egppLogo {
    width: 220px;
    flex-shrink: 0;
    top: 10px;
    left: 10px;
}

/* Stili per l'overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 375px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: auto;
}

/* Stili per nascondere l'overlay */
.overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

#overlayPage2 {
    display: none;
}

/* Main disclaimer image */
#mainImage {
    width: 100%;
    border-radius: 0px 0px 30px 30px;
    margin-top: -100px;
}

/* Stili per il div bianco */
.content {
    display: flex;
    width: calc(100% - 30px);
    min-width: 375px;
    max-width: 1177px;
    height: calc(100% - 30px);
    max-height: calc(100% - 30px);
    padding: 0px 40px 40px 40px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: 30px;
    background: #FFF;
    position: relative;
    margin: 15px;
}

/* Stili per il pulsante di chiusura */
#closeBtn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

@media (hover: hover) {
    #closeBtn:hover>circle {
        fill: rgba(0, 0, 0, 0.75);
    }
}

.modal-header {
    border-bottom: 0 !important;
}

.modal-header .btn-close {
    margin-top: -50px;
    margin-right: 0;
}

.modalHeader {
    font-family: "Avenir Black";
    color: var(--Black, #000);
    font-size: calc(36 / var(--base-font-size) * 1rem);
    align-self: stretch;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.modalSubtitle {
    font-family: "Avenir Medium";
    color: var(--Black, #000);
    font-size: calc(32 / var(--base-font-size) * 1rem);
    margin-top: 20px;
    margin-bottom: 40px;
}

.paddingBottom {
    padding-bottom: 40px;
}

.modalBody {
    font-family: "Avenir Light";
    color: var(--Carbon-Gray, #5E5E5E);
    font-size: calc(20 / var(--base-font-size) * 1rem);
    line-height: 120%;
    text-align: left;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.modalBody-smaller {
    font-size: calc(16 / var(--base-font-size) * 1rem);
}

.disclaimerScrollable {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

.disclaimerTitle {
    font-family: "Avenir Black";
    color: var(--Black, #000);
    font-size: calc(36 / var(--base-font-size) * 1rem);
    align-self: stretch;
    margin-top: calc(36 / var(--base-font-size) * 1rem);
    margin-bottom: calc(36 / var(--base-font-size) * 1rem);
}

.disclaimerSubtitle {
    font-family: "Avenir Book";
    color: var(--Carbon-Gray, #5E5E5E);
    font-size: calc(26 / var(--base-font-size) * 1rem);
    line-height: 120%;
    margin-bottom: calc(26 / var(--base-font-size) * 1rem);
    text-align: left;
    width: 100%;
}

.disclaimerText {
    font-family: "Avenir Light";
    color: var(--Carbon-Gray, #5E5E5E);
    font-size: calc(20 / var(--base-font-size) * 1rem);
    line-height: 120%;
    text-align: left;
    width: 100%;
}

.disclaimerFooter {
    display: flex;
    align-items: center;
    column-gap: 40px;
    row-gap: 10px;
    align-self: stretch;
    margin-top: calc(40 / var(--base-font-size) * 1rem);
}

.disclaimerFooterButton {
    display: flex;
    font-family: "Avenir Medium";
    padding: 12px 22px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 40px;
    border: 1px solid var(--White, #FFF);
    background: var(--Black, #000);
    font-size: calc(24 / var(--base-font-size) * 1rem);
    color: #FFF;
    cursor: pointer;
    text-decoration: none;
}

@media (hover: hover) {
    .disclaimerFooterButton:hover {
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), var(--Black, #000);
    }
}

ul.navbar-nav {
    background: black;
    padding-bottom: 0px;
}

nav {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
}

.navbar-nav{
    padding-top: 20px;
    padding-bottom: 200px;
}

.title {
    color: #FFF;
    font-family: "Avenir Heavy";
    font-size: calc(36 / var(--base-font-size) * 1rem);
    padding-right: 20px;
    padding-top: 12px;
}

.title2Div {
    position: fixed;
    bottom: 0;
    width: 100%;
    min-width: 375px;
    text-align: center;
    padding: 10px;
    background-color: #000;
    display: none;
}

.title2 {
    color: #FFF;
    font-family: "Avenir Heavy";
    font-size: calc(20 / var(--base-font-size) * 1rem);
    display: none;
}

#navbarNavDropdown {
    max-height: 200px;
    z-index: 900;
    background-color: #000;
}

.headingButtons {
    display: flex;
    gap: 10px 40px;
    /* You can use multiple values for gap, the first being vertical, the second horizontal. */
}

.headingButton {
    text-align: left;
    color: #fff;
    font-family: "Avenir Medium";
    font-size: calc(20 / var(--base-font-size) * 1rem);
    cursor: pointer;
    text-decoration: none;
}

@media (hover: hover) {
    .headingButton:hover {
        color: #fff;
        /* text-decoration: underline solid #eeeeee 1px; */
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-color: #eeeeee;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }
}

.headingButton:active {
    color: #fff;
}

.headingButton:visited {
    color: #fff;
}

.headingDownloadButton {
    display: none;
    padding: 10px 22px 6px 22px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: 1px solid #FFF;
    background: var(--Black, #000);
    color: #FFF;
    font-family: "Avenir Medium";
    font-size: calc(20 / var(--base-font-size) * 1rem);
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 10px;
}

@media (hover: hover) {
    .headingDownloadButton:hover {
        color: #ccc;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), var(--Black, #000);
    }
}

.headingDownloadButton:active {
    color: #fff;
}

.headingDownloadButton:visited {
    color: #fff;
}

/* ---------------------- */

.divHeadingDownloadButtonBottom {
    position: absolute;
    bottom: 87px;
    right: 120px;
}

.headingDownloadButtonBottom {
    display: flex;
    padding: 8px 22px 4px 22px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: 1px solid #FFF;
    background: var(--Low, #FFBD48);
    color: #000;
    font-family: "Avenir Medium";
    font-size: calc(20 / var(--base-font-size) * 1rem);
    cursor: pointer;
    text-decoration: none;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    margin-bottom: 10px;
}

@media (hover: hover) {
    .headingDownloadButtonBottom:hover {
        color: #222;
        background: #fff;
    }
}

.headingDownloadButtonBottom:active {
    color: #000;
}

.headingDownloadButtonBottom:visited {
    color: #000;
}

.blackLinks {
    text-align: center;
    color: var(--Carbon-Gray, #5E5E5E);
    font-family: "Avenir Medium";
    font-size: calc(20 / var(--base-font-size) * 1rem);
    cursor: pointer;
    text-decoration: none;
}

.blackLinks-smaller {
    text-align: center;
    color: var(--Carbon-Gray, #5E5E5E);
    font-family: "Avenir Medium";
    font-size: calc(16 / var(--base-font-size) * 1rem);
    cursor: pointer;
    text-decoration: none;
}

@media (hover: hover) {
    .blackLinks:hover {
        color: var(--Carbon-Gray, #5E5E5E);
        /* text-decoration: underline solid var(--Carbon-Gray, #5E5E5E) 1px; */
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-color: var(--Carbon-Gray, #5E5E5E);
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }

    .blackLinks-smaller:hover {
        color: var(--Carbon-Gray, #5E5E5E);
        /* text-decoration: underline solid var(--Carbon-Gray, #5E5E5E) 1px; */
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-color: var(--Carbon-Gray, #5E5E5E);
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }
}

.blackLinks:active {
    color: var(--Carbon-Gray, #5E5E5E);
}

.blackLinks:visited {
    color: var(--Carbon-Gray, #5E5E5E);
}

.adjustPaddingTop {
    padding-top: 4px;
}

.extendOptionSelectArea{
    margin-left: -36px;
    padding-left: 36px;
    padding-right: 6px;
    background-color: transparent;
}

.buttonsRisk {
    display: flex;
    /* width: 196px; */
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: absolute;
    left: 56px;
    bottom: 87px;

    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
}

.riskLevelSelect {
    display: flex;
    padding: 4px 20px 4px 8px;
    align-items: center;
    gap: 12px;
    align-self: stretch;

    border-radius: 60px;
    border: 1px solid var(--Platinum, #E3E4E6);
    background: #000;

    font-family: "Avenir Book";
    color: var(--Platinum, #E3E4E6);
    font-size: calc(20 / var(--base-font-size) * 1rem);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 30px */
}

.riskLevelSelect label {
    cursor: pointer;
}

@media (hover: hover) {
    .riskLevelSelect:hover {
        color: var(--Platinum, #E3E4E6);
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), #000;
    }
}

.riskLevelSelectActive {
    background: #E3E4E6 !important;
    color: var(--Black, #000) !important;
}

.circleCloseButton {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    width: 24px;
    height: 24px;

    border: none;
    cursor: pointer;
    padding: 0 0 0 0;
    /* top, right, bottom, left */
    text-align: center;
    vertical-align: middle;
    font-family: "Avenir Light";
    font-size: 18px;
    color: #FFF;
}

.circleCloseButton span {
    position: relative;
    bottom: 2px;
    right: 2px;
}

.in_comparison_to {
    color: var(--Carbon-Gray, #5E5E5E);
    font-family: "Avenir Medium";
    font-size: 20px;    
    line-height: 28px;
    letter-spacing: -0.6px;
    margin: 10px;
    vertical-align: bottom;
}

.extraContentToggleRow {
    display: flex; 
    align-items: center; 
    justify-content: space-between;

    cursor: pointer;
}

.extraContentPreviousYear {
    color: var(--Carbon-Gray, #5E5E5E);
    font-family: "Avenir Light";
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.6px;

    /* display: none;              Initially hidden */
    max-height: 0px;            /* Initially collapsed */
    opacity: 0;                 /* Initially invisible */
    overflow: hidden;           /* Hide content overflowing the max-height */
    transition: max-height 0.5s ease, opacity 0.5s ease; /* Smooth transition for max-height and opacity */
}

.previousYearMessageDiv1 {
    margin-top: 0;
}

.previousYearMessageDiv2 {
    margin-top: 20px;
}

.previousYearMessageDiv3 {
    margin-top: 0;
}

/* =============================================== */

.yearSelector {
    display: flex;
    width: 206px;
    padding: 8px 6px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-radius: 30px;
    background: var(--Black, #000);
    position: absolute;
    left: 50px;
    bottom: 407px;
}

.yearSelector label {
    color: var(--Platinum, #E3E4E6);
    font-family: "Avenir Light";
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 30px */
    margin-left: 10px;
}

.custom-select {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.selected-option {
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 4px;
    background: #000;
    color: var(--Platinum, #E3E4E6);
    font-family: "Avenir Book";
    font-size: calc(20 / var(--base-font-size) * 1rem);
    font-weight: 500;
    border-radius: 60px;
    border: 1px solid var(--Platinum, #E3E4E6);
    cursor: pointer;
    position: relative;
}

/* Arrow styling */
.arrow {
    position: absolute;
    right: 12px;
    top: 44%;
    width: 14px;
    height: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L7 7L13 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: transform 0.3s ease-in-out;
    pointer-events: auto;  /* Make sure the arrow is clickable */
    z-index: 2;  /* Ensure the arrow is on top of other elements */
}

/* Rotate the arrow when the dropdown is open */
.custom-select.open .arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Style for the options container */
.options {
    visibility: hidden;  /* Initially hidden */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #E3E4E6;
    border-radius: 20px;
    border: 1px solid var(--Platinum, #000000);
    z-index: 1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    max-height: 200px; /* Limit the height of the dropdown */
    overflow-y: auto; /* Scrollable if there are too many options */
    margin-top: 15px;
    font-family: "Avenir Book";
    font-size: calc(20 / var(--base-font-size) * 1rem);
    font-weight: 500;
    color: #000;
    opacity: 0;  /* Start with the options hidden */
    transform: translateY(-60px);  /* Start slightly above */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0s 0.3s;  /* Smooth slide and fade-in */
}

/* Make the options visible when the dropdown is open */
.custom-select.open .options {
    visibility: visible;  /* Make options visible */
    opacity: 1;  /* Fade in */
    transform: translateY(0);  /* Slide down to its normal position */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;  /* Smooth transition for slide-in and fade-in */
}

/* Styling for individual options */
.options div {
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 4px;    
    transition: background-color 0.2s ease, color 0.2s ease;  /* Smooth transitions */
    cursor: pointer;  /* Indicate interactivity */
}

.options div:not(:last-child) {
    border-bottom: 1px solid #bfbfbf;  /* Border for all but last child */
}

/* Hover effect for each option */
.option:hover {
    background-color: rgba(0, 0, 0, 0.1);  /* Slight background color change when hovering */    
    cursor: pointer;  /* Indicate interactivity */
}

/* Styling for selected (clicked) option */
.option.selected {
    /* background-color: rgba(0, 0, 0, 0.1); */
    color: #555;
    cursor: default;
}

/* Add a slightly darker background color when clicked */
.option:active {
    /* background-color: rgba(0, 0, 0, 0.1); */
    color: #555;
    cursor: default;
}

/* Hide the default select element */
select {
    display: none;
}

/* =============================================== */

@media only screen and (max-width: 1919px) {

    /* .navbar-expand-xl .navbar-toggler {
        display: none;
    } */

    .yearSelector {
        bottom: 340px;
    }

    .title {
        display: none;
    }

    .title2 {
        display: block;
    }

    .title2Div {
        display: block;
    }

    ul.navbar-nav {
        padding-bottom: 0px;
    }

    #chartdiv {
        top: 70px;
    }

    .yearSelector {
        left: 4px;
        padding: 6px 6px;
        width: 169px;
        bottom: 340px;
        border-radius: 22px;
    }

    .yearSelector label {
        font-size: (16 / var(--base-font-size) * 1rem);
        font-family: "Avenir Book";
        font-weight: 500;        
    }

    .selected-option {        
        font-size: (16 / var(--base-font-size) * 1rem);
        font-family: "Avenir Book";
        font-weight: 500;
    }

    .options {        
        font-family: "Avenir Book";
        font-size: calc(16 / var(--base-font-size) * 1rem);
        font-weight: 500;
        margin-top: 5px;
        border-radius: 16px;
    }

    .buttonsRisk {
        left: 10px;
    }

    .riskLevelSelect {
        font-size: (16 / var(--base-font-size) * 1rem);
        padding: 4px 8px;
    }

    /* line between hamburger menu voices */
    li.nav-item > a {
        border-bottom: 1px solid #aaaaaa;
    }    

    /* Exclude the 'Partners' link (with 'no-border' class) from having a border */
    li.nav-item .no-border {
        border-bottom: none;
    }

    .headingDownloadButton {
        margin-top: 10px;
    }

    .divHeadingDownloadButtonBottom {
        right: 70px;
        bottom: 87px;
    }
    
    .headingDownloadButtonBottom {
        font-size: (16 / var(--base-font-size) * 1rem);
    }
}

/* =============================================== */

@media only screen and (max-width: 1439px) {
    .yearSelector {
        bottom: 300px;
    }
}

/* =============================================== */

@media only screen and (max-width: 1366px),
screen and (max-height: 768px) {

    .content {
        width: 60%;
        height: 96%;
    }

    .disclaimerScrollable::-webkit-scrollbar-button:start:increment {
        height: 14%;
    }

    /* Main disclaimer image */
    #mainImage {
        margin-top: -90px;
    }

    .disclaimerTitle {
        font-size: calc(30 / var(--base-font-size) * 1rem);
    }

    .disclaimerSubtitle {
        font-size: calc(22 / var(--base-font-size) * 1rem);
    }

    .disclaimerText {
        font-size: calc(16 / var(--base-font-size) * 1rem);
    }

    .disclaimerFooterButton {
        font-size: calc(18 / var(--base-font-size) * 1rem);
    }

    .title {
        font-size: calc(30 / var(--base-font-size)* 1rem);
    }

    .headingButton {
        font-size: calc(16 / var(--base-font-size)* 1rem);
    }

    .headingDownloadButton {
        font-size: calc(16 / var(--base-font-size)* 1rem);
    }    
}

/* =============================================== */

@media only screen and (max-width: 991px) {
    .zoomControlButtons {
        display: none;
    }

    .divHeadingDownloadButtonBottom {
        right: 16px;
    }

    /* Main disclaimer image */
    #mainImage {
        margin-top: -10%;
    }

    .disclaimerScrollable::-webkit-scrollbar-button:start:increment {
        height: 14%;
    }

    .content {
        width: 90%;
        height: 90%;
    }
}

/* =============================================== */

@media only screen and (max-width: 767px) {
    .disclaimerFooterButton {
        font-size: calc(18 / var(--base-font-size) * 1rem);
    }

    .headingDownloadButton {
        display: flex;
    }

    .divHeadingDownloadButtonBottom{
        display: none;
    }

    ul.navbar-nav {
        padding-bottom: 20px;
    }
}