/* ID */
#divHelp { visibility: hidden; position: fixed; width: 350px; height: 250px; background: #fff; z-index: 10000; right: 20px; bottom: 20px; border: 1px solid #a7000a; border-radius: 10px; padding: 20px; }
#helpTitle { border-bottom: 2px solid #a7000a }
#helpClose {  visibility: hidden; position: fixed; right: 30px; bottom: 240px; width: 20px; }
#helpImage { visibility: hidden; position: fixed; z-index: 15; right: 340px; bottom: 240px; width: 60px; height: 60px; border: 1px solid #a7000a; border-radius: 50%; background: #fff; padding: 5px; }
#helpText, #helpText li { padding: 5px; font-size: 12px }
#preloader { position: absolute; height: 100%; width: 100%; z-index:10000 }
#preloader .css3-spinner { background-color: white; height: 100%; width: 100% }

/* CLASS */
.button-border.button-pr { border-color: #a7000a; color: #a7000a }
.button.button-border:not(.button-fill):hover.button-pr { background-color: #a7000a;}
.button.button-border.button-pr.button-fill::before { background-color: #a7000a; }
.g-recaptcha div { margin: auto!important }
.cert_title {font-weight: 400!important; font-size: 26px!important }
.cert_subtitle { font-weight:400!important; font-size:16px!important; margin-bottom: 10px }
.cert_red a { color: #ef312d }
.cert_red .cert_title { border-bottom: 2px solid #ef312d }
.cert_yellow a { color: #febe2c }
.cert_yellow .cert_title { border-bottom: 2px solid #febe2c }
.cert_cyan a { color: #22abe2 }
.cert_cyan .cert_title { border-bottom: 2px solid #22abe2 }
.cert_blue a { color: #1760aa }
.cert_blue .cert_title { border-bottom: 2px solid #1760aa }
.cert_purple a { color: #b169a3 }
.cert_purple .cert_title { border-bottom: 2px solid #b169a3 }
.cert_violet a { color: #d23294 }
.cert_violet .cert_title { border-bottom: 2px solid #d23294 }
.cert_green a { color: #85c657 }
.cert_green .cert_title { border-bottom: 2px solid #85c657 }
.dashboardIcon { border-radius: 5px; margin: auto; margin-bottom: 10px; border: 3px solid #a7000a; height: 150px; width:150px; padding: 30px; background: #fff; box-shadow: 5px 5px rgba(0,0,0,0.2) }
.dashboardIcon:hover{ margin-left: 5px; margin-top: 5px;  margin-bottom: 5px; box-shadow: none; }
.dashboard_card { border: 1px solid #a7000a; padding: 0px }
.dashboard_card .title { background-color: #a7000a; padding: 5px 10px }
.dashboard_card .title h4 { font-size: 16px; color: white; margin: 0px; text-transform: uppercase; }
.dashboard_card .title h4 a { color: white }
.dashboard_card .content { padding: 5px 10px }
.div_legend { width:10px; height:30px; display:inline-block }
.divider_title { font-size: 45px; margin: 0px; text-shadow: 1px 3px 5px #333;  }
.entry_meta_ticket_public { width: max-content; margin:auto }
.entry_meta_ticket li, .entry_meta_ticket li a, .entry_meta_ticket_public li, .entry_meta_ticket_public li a, .entry_meta_company_advice li, .entry_meta_company_advice li a{ color: #333!important }
.error input, .error textarea, .error select, .error div.well { border: 1px solid #CB0C0F!important;}
.error div.checkbox, .error .switch label{ color: #CB0C0F!important;}
.error #consentLabel { color: #CB0C0F!important}
.fbox_dashboard { border: 3px solid #a7000a; padding:10px }
.fbox_dashboard:hover{ box-shadow: inset 0px 0px 7px rgba(167,0,10,0.5) }
.filter_arrow, .filter_arrow_0, .filter_arrow_1, .filter_arrow_2, .filter_arrow_3 { background: none; border: 0px; padding: 0px; }
.filter_arrow > img, .filter_arrow_0 > img, .filter_arrow_1 > img, .filter_arrow_2 > img, .filter_arrow_3 > img { width:18px!important; vertical-align: text-top!important }
.form_body { padding: 20px 20px; }
.form_div { padding: 0px; border: 1px solid #ddd }
.form_footer .button { width: 130px }
.form_header { padding: 10px 20px; background-color: #a7000a; }
.form_header span { color: white }
.icon_pr { border: 2px solid #4F001D; padding: 3px }
.icon_sc { border: 2px solid #a7000a; padding: 3px }
.icon_amber { border: 2px solid #EB9C4D; padding: 3px }
.icon_red { border: 2px solid #C02942; padding: 3px }
.icon_green { border: 2px solid #59ba41; padding: 3px }
.icon_grey { border: 2px solid #777777; padding: 3px }
.icon_info { width: 15px; height: 15px }
.icon_info img { width: 15px; height: 15px }
.icon_counter { width: 64px; height: 64px }
.img_list { width: 50px; height: 50px; border: 2px solid #a7000a }
.img_profile { width: 100px; height: 100px; border: 3px solid #a7000a; margin-bottom: 10px; margin-top: 10px }
.img_shadow { box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3) }
.label_bg { padding: 4px; border-radius: 5px }
.modalTitle { padding: 30px; padding-bottom: 15px }
.modalTitle h4 { margin: 0px }
.modalBody { padding: 15px 30px }
.modalFooter { padding: 30px }
.modalFooter .button-mini { width:100px }
.modal_stripe { border-bottom: 1px solid #a7000a; background: #CE000C; height: 20px }
.modal-content form { margin-bottom: 0px }
.navigation { width:auto; margin: auto; margin-top: 10px }
.notice { width: 400px; position: fixed; z-index: 20000; right: 5px; top: 5px; }
.pagination span { width: 30px; height: 30px; line-height: 30px; text-align: center; margin: 2px; padding: 0px; font-size: 12px; border: 1px solid #a7000a; border-radius: 50% }
.pagination .current { background: #a7000a; color: white }
.span_color { border-radius: 5px; padding: 4px; line-height: 16px; font-size: 12px }
.span_legend { height:30px; display:inline-block; vertical-align:top; line-height:30px; margin-left:5px }
.table_colored { vertical-align: middle; margin-bottom: 0px }
.table_colored th, .table_colored td, .table_colored select, .table_colored input { font-size: 14px }
.table_colored thead th { background-color: #a7000a!important; color: #fff!important; text-transform: uppercase; }
.table_no_padding th, .table_no_padding td { padding: 0px !important }
.table.b_none th, .table.b_none td { border: 0px !important }
.table_holiday th { height: 40px!important; vertical-align: middle!important; }
.table_holiday td { height: 40px!important; vertical-align: middle!important; }
.td_action { min-width: 50px; width: 50px }
.td_action img, .icon_action { min-width: 30px; min-height: 30px; width: 30px; height: 30px; cursor:pointer }
.td_action_xl img, .icon_action_xl { min-width: 64px; min-height: 64px; width: 64px; height: 64px; cursor:pointer }
.ticket_message_avatar { max-width: 70px; border-radius: 50%; border: 3px solid #a7000a }
.tr_locked td { background-color: rgba(255, 0, 0, 0.2) }
.tr_spacer { height: 30px; border-left:0px white; border-right: 0px white;}
.tutorialMsg { background-color: #ddd }

.chart-samples ul { list-style: none; }
.chart-samples h4 { text-transform: uppercase; margin-bottom: 20px; font-weight: 400; }
.chart-samples li { font-size: 16px; line-height: 2.2; font-weight: 600; }
.chart-samples li a:not(:hover) { color: #AAA; }

.ratio_news_main { aspect-ratio: 540/270!important }
.ratio_news_cover { aspect-ratio: 1920/600!important }

.toggle_eer .toggle-content { padding: 0px }
.ul_eer { list-style: none; padding-left: 26px }
.ul_eer .v_waste_subcategory { font-weight: bold; margin-top: 10px }
.ul_none { list-style: none }

.v_process_num { width: 60px; vertical-align: top; }
.v_process_num span { border: 1px solid #CB0C0F; border-radius: 50%; height: 50px; width: 50px; display: block; font-size: 20px; text-align: center; line-height: 46px }
.v_process_text { width: calc(100% - 70px); margin-left: 20px }
.v_process_text h4 { margin-bottom: 0px }
/* MEDIA */

.divider_personal { background-size: cover; background-position: center; }
.divider_personal { height: 400px }

/* LG */
@media (min-width: 1201px) and (max-width: 1500px){
    .divider_personal { height: 350px }
}

/* MD */
@media (min-width: 992px) and (max-width: 1200px){
    .divider_personal { height: 300px }
}

/* SM */
@media (min-width: 768px) and (max-width: 992px){
    .divider_personal { height: 250px }
}

/* XS */
@media (max-width: 767px){
    .divider_personal { height: 200px }
    .footer_left{ text-align: center }
    .footer_right{ text-align: center }
}
@media (max-width: 660px){
    .slider_title { top:30%; font-size: 45px; }
}

@media (max-width: 1200px){
    .footer_left{ text-align: center }
    .footer_right{ text-align: center }
}

@media (min-width: 992px){
    #privateAreaHeaderRow { display: block } 
}

.life_blue_c { color: #006eae!important }
.life_green_c { color: #41af64!important }
.life_light_blue_c { color: #53b4ba!important }
.button_life_blue { color: #006eae!important; border-color: #006eae!important }
.button_life_blue:hover { color:white!important; background-color: #006eae!important }

@font-face { font-family: "EXO2R"; src: url(../fonts/Exo2-Regular.ttf); }
@font-face { font-family: "EXO2M"; src: url(../fonts/Exo2-Medium.ttf); }
.exo2r_font{ font-family: EXO2R!important; }
.exo2m_font{ font-family: EXO2M!important; }

.th_sticky { position: sticky; top:0px; z-index:10 }

.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay nero semi-trasparente */
    z-index: 1000; /* Mettilo sopra il contenuto */
    pointer-events: none; /* Permette di interagire col contenuto sotto l'overlay */
}

/* PYRAMID */

/* Stile di base per la piramide */
.pyramid-container {
    display: flex;
    position: relative;
    align-items: center;
    gap: 20px;
    margin: 10px;
    width: 500px; /* Si adatta al contenuto */
    margin-left: 250px; /* Allineamento a sinistra */
}

.pyramid {
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: relative;
}

.pyramid__section {
    flex: 1 1 auto;
    margin-bottom: 2px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background-color: #e0d7f4;
}

.pyramid__section:nth-of-type(3) {
    margin-bottom: 0;
}

.pyramid__labels {
    position: absolute;
    top: 0;
    left: 100%;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-left: 10px;
}

.label {
    font-size: 20px;
    color: #333;
    text-align: left;
    white-space: nowrap;
}

.label strong {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/* Posizionamento specifico delle etichette */
.label-top {
    margin-top: 50px;
    margin-left: -150px;
}

.label-middle {
    margin-left: -80px;
}

.label-bottom {
    margin-bottom: 40px;
    margin-left: -5px;
}

/* Media Queries per la Responsività */

/* xs e sm - dispositivi piccoli (ad esempio telefoni) */
@media (max-width: 767.98px) {
    .pyramid-container {
        width: 100%; /* Adattare la larghezza */
        margin-left: 0; /* Rimuovere il margine sinistro */
        flex-direction: column; /* Disporre la piramide sopra le etichette */
        align-items: center;
        gap: 30px;
    }

    .pyramid {
        width: 300px; /* Ridurre la larghezza per dispositivi più piccoli */
        height: 300px; /* Ridurre l'altezza */
    }

    .pyramid__section i {
        font-size: 30px; /* Ridurre la dimensione delle icone */
    }

    .pyramid__labels {
        position: relative; /* Cambiare posizione delle etichette */
        left: 0;
        width: 100%;
        padding-left: 0;
    }

    .label {
        font-size: 18px; /* Ridurre la dimensione del testo */
        text-align: center; /* Centrare il testo nelle etichette */
        margin: 10px 0;
    }

    .label-top {
        margin-left: 0;
        margin-top: 30px;
    }

    .label-middle {
        margin-left: 0;
    }

    .label-bottom {
        margin-left: 0;
        margin-bottom: 20px;
    }
}

/* md - dispositivi medi (tablet) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pyramid-container {
        width: 100%;
        margin-left: 0;
        flex-direction: row; /* Mantieni la disposizione in fila */
        gap: 30px;
    }

    .pyramid {
        width: 400px;
        height: 400px;
    }

    .pyramid__section i {
        font-size: 35px;
    }

    .pyramid__labels {
        padding-left: 15px;
        left: 100%;
        width: auto;
    }

    .label {
        font-size: 18px;
        text-align: left;
        margin: 10px 0;
    }

    .label-top {
        margin-left: -100px;
    }

    .label-middle {
        margin-left: -50px;
    }

    .label-bottom {
        margin-left: 0;
        margin-bottom: 30px;
    }
}

/* lg - dispositivi grandi (desktop) */
@media (min-width: 992px) {
    .pyramid-container {
        width: 500px;
        margin-left: 250px;
        flex-direction: row; /* Mantieni la disposizione in fila */
        gap: 20px;
    }

    .pyramid {
        width: 500px;
        height: 500px;
    }

    .pyramid__section i {
        font-size: 40px;
    }

    .pyramid__labels {
        padding-left: 10px;
        left: 100%;
        width: auto;
    }

    .label {
        font-size: 20px;
        text-align: left;
    }
}