/* 	Author: IT-ROOM 
	Description : feuille de style pour intégrer les tableaux sur le front
*/

:root {
    --itr-dpe-a: #23a06c;
    --itr-dpe-b: #4fb154;
    --itr-dpe-c: #a4cc74;
    --itr-dpe-d: #f2e71d;
    --itr-dpe-e: #f0b418;
    --itr-dpe-f: #eb8335;
    --itr-dpe-g: #d71d20;
    --itr-ges-a: #a3daf8;
    --itr-ges-b: #8cb4d3;
    --itr-ges-c: #7692b1;
    --itr-ges-d: #606f8e;
    --itr-ges-e: #4d5271;
    --itr-ges-f: #373551;
    --itr-ges-g: #281c34;
}


/* OLD DPE */

.appt-desc__energy-balance-title {
    margin-bottom: 0;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #07374e;
}

.appt-desc__energy-balance-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.appt-desc__energy-balance-diag {
    margin-top: 16px;
    margin-right: 24px;
}

.appt-desc__energy-balance-diag-title {
    margin-bottom: 8px;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #07374e;
}

.appt-desc__energy-balance-diag-score {
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: #07374e;
}

.appt-desc__energy-balance-panel {
    display: flex;
    margin-top: 8px;
}

.appt-desc__energy-balance-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: white;
}

.appt-desc__caracteristiques-bloc .appt-desc__caracteristique-container.ext-no {
    order: 1;
    display: none;
}

#selected-panel-letter {
    border: 1px solid #f8f8f8;
    border-radius: 5px;
    color: black;
    transform: scale(1.4);
}

.dpe-a {
    background-color: rgb(43, 139, 38);
    border-radius: 5px 0 0 5px;
}

.dpe-b {
    background-color: rgb(48, 197, 39);
}

.dpe-c {
    background-color: rgb(196, 255, 41);
}

.dpe-d {
    background-color: rgb(245, 253, 16);
}

.dpe-e {
    background-color: rgb(254, 194, 11);
}

.dpe-f {
    background-color: rgb(253, 134, 40);
}

.dpe-g {
    background-color: rgb(251, 0, 6);
    border-radius: 0 5px 5px 0;
}

.ieg-a {
    background-color: rgb(243, 231, 247);
    border-radius: 5px 0 0 5px;
}

.ieg-b {
    background-color: rgb(217, 177, 246);
}

.ieg-c {
    background-color: rgb(201, 147, 242);
}

.ieg-d {
    background-color: rgb(190, 124, 240);
}

.ieg-e {
    background-color: rgb(170, 85, 235);
}

.ieg-f {
    background-color: rgb(149, 44, 230);
}

.ieg-g {
    background-color: rgb(118, 0, 214);
    border-radius: 0 5px 5px 0;
}

.itr-legend-old-dpe {
    text-align: center;
    margin: 20px auto 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    font-style: italic;
    color: #07374e;
}


/* END OLD DPE */


/* NEW DPE */

#itr-dpe-ges .itr-dpe-ges-heading {
    margin-bottom: 1rem;
}

#itr-dpe-ges .itr-dpe-ges-heading h2 {
    margin-bottom: 0;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #07374e;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper {
    width: 100%;
    max-width: 700px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper h3,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper h3 {
    margin-bottom: 15px;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #07374e;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper {
    display: flex;
    margin-bottom: 2px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper .itr-dpe-value {
    min-width: 140px;
    max-width: 170px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-value {
    min-width: 140px;
    max-width: 170px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper .itr-dpe-table,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper .itr-ges-table {
    width: 100%;
    padding-left: 5px;
    position: relative;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper .itr-ges-table {
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper .itr-dpe-table:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 0;
    width: 0;
    border-top: 13px solid rgb(245, 245, 245);
    border-left: 8px solid transparent;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper .itr-dpe-table:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 0;
    width: 0;
    border-bottom: 13px solid rgb(245, 245, 245);
    border-left: 8px solid transparent;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper:nth-child(3) .itr-dpe-table,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper:nth-child(3) .itr-ges-table {
    width: calc(3em);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper:nth-child(4) .itr-dpe-table,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper:nth-child(4) .itr-ges-table {
    width: calc(3em * 1.5);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper:nth-child(5) .itr-dpe-table,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper:nth-child(5) .itr-ges-table {
    width: calc(3em * 2);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper:nth-child(6) .itr-dpe-table,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper:nth-child(6) .itr-ges-table {
    width: calc(3em * 2.5);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper:nth-child(7) .itr-dpe-table,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper:nth-child(7) .itr-ges-table {
    width: calc(3em * 3);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper:nth-child(8) .itr-dpe-table,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper:nth-child(8) .itr-ges-table {
    width: calc(3em * 3.5);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper:nth-child(9) .itr-dpe-table,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper:nth-child(9) .itr-ges-table {
    width: calc(3em * 4);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper .itr-dpe-table span,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper .itr-ges-table span {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active {
    height: 55px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-value {
    border: 3px solid #000;
    border-right: none;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-value {
    position: relative;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-value::before {
    content: "";
    position: absolute;
    left: 5px;
    width: 25%;
    height: 2px;
    background-color: #000;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-table {
    border: 3px solid #000;
    border-right: none;
    height: 100%;
    display: flex;
    align-items: center;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-table {
    border: 3px solid #000;
    height: 100%;
    display: flex;
    align-items: center;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-table::before {
    left: 100%;
    border-top: 24.5px solid transparent;
    border-bottom: 24px solid transparent;
    z-index: 1;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active.itr-dpe-a .itr-dpe-table::before {
    border-left: 29px solid var(--itr-dpe-a);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active.itr-dpe-b .itr-dpe-table::before {
    border-left: 29px solid var(--itr-dpe-b);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active.itr-dpe-c .itr-dpe-table::before {
    border-left: 29px solid var(--itr-dpe-c);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active.itr-dpe-d .itr-dpe-table::before {
    border-left: 29px solid var(--itr-dpe-d);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active.itr-dpe-e .itr-dpe-table::before {
    border-left: 29px solid var(--itr-dpe-e);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active.itr-dpe-f .itr-dpe-table::before {
    border-left: 29px solid var(--itr-dpe-f);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active.itr-dpe-g .itr-dpe-table::before {
    border-left: 29px solid var(--itr-dpe-g);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-table::after {
    left: 100%;
    border-top: 27.5px solid transparent;
    border-bottom: 27.5px solid transparent;
    border-left: 32px solid #000;
    top: -3px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-table span,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-table span {
    font-size: 28px;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-value,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-value {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-family: "Montserrat", sans-serif;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-value .itr-dpe-part-value,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-value .itr-ges-part-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-value span.value,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-value span.value {
    font-size: 18px;
    font-weight: bold;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-value span,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-value span {
    font-size: 10px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .letter-dpe-wrapper.itr-active .itr-dpe-value .itr-separator,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .letter-ges-wrapper.itr-active .itr-ges-value .itr-separator {
    width: 2px;
    height: 40px;
    background-color: #000;
    border-radius: 4px;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .itr-dpe-low,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .itr-dpe-high,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .itr-ges-low,
#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .itr-ges-high {
    font-family: 'Montserrat', sans-serif;
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0;
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .itr-dpe-low {
    color: var(--itr-dpe-a);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper .itr-dpe-high {
    color: var(--itr-dpe-g);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .itr-ges-low {
    color: var(--itr-ges-a);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper .itr-ges-high {
    color: var(--itr-ges-g);
}

#itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-legends {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 11px;
    font-weight: 400;
    line-height: 16.5px;
}

#itr-dpe-ges .itr-dpe-mention {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

@media (min-width: 1184px) {
    #itr-dpe-ges .itr-dpe-ges-table-wrapper {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    #itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-dpe-table-wrapper,
    #itr-dpe-ges .itr-dpe-ges-table-wrapper .itr-ges-table-wrapper {
        width: 48%;
    }
}