/********* NEW DPE GES ****/

.ligne.active, #side-box-wrap-inner {
    height: 56px;
    font-size: 35px;
}

.ligne.active {
    border: 1px solid #2c2c2c
}

.ligne.active span {
    position: absolute;
    z-index: 99;
}

.ligne.active::after{
    border-width: 27px 0px 27px 21px;
    top: 1px;
}

.left-box-number {
    font-size: 1.1rem;
}

#side-box-wrap-inner {
    border-radius: 5px 0 0 5px;
    border: 2px solid rgb(39, 39, 39);
}

#side-box-wrap-inner .fw-bolder {
    line-height: 1.5rem;
}
#side-box-wrap{
    right: -3px;
}



.ligne {
    height: 26px;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 1.075rem;
}
.ligne::after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-width: 13px 0px 13px 13px;
    top: 0;
    left: 100%;
}

.rotated-cube.active{
    height: 40px;
    width: 39px;
    position: absolute;
    right: -20px;
    transform: rotate(45deg);
    border: 1px solid #0d0d0d;
    border-left: 0;
    border-bottom: 0;
}


.letter-a {background-color: #17ad76 !important;width: 12% !important;}
.letter-b {background-color: #2b9b2f !important;width: 20% !important;}
.letter-c {background-color: #c7d600 !important;width: 28% !important;}
.letter-d {background-color: #f3e801 !important;width: 37% !important;}
.letter-e {background-color: #ffcd00 !important;width: 47% !important;}
.letter-f {background-color: #f69a40 !important;width: 57% !important;}
.letter-g {background-color: #ea4443 !important;width: 66% !important;}


.letter-a-color {background-color: #17ad76 !important;}
.letter-b-color {background-color: #2b9b2f !important;}
.letter-c-color {background-color: #c7d600 !important;}
.letter-d-color {background-color: #f3e801 !important;}
.letter-e-color {background-color: #ffcd00 !important;}
.letter-f-color {background-color: #f69a40 !important;}
.letter-g-color {background-color: #ea4443 !important;}

.ligne.letter-a::after{border-color: transparent #17ad76;}
.ligne.letter-b::after {border-color: transparent #2b9b2f;}
.ligne.letter-c::after {border-color: transparent #c7d600;}
.ligne.letter-d::after {border-color: transparent #f3e801;}
.ligne.letter-e::after {border-color: transparent #ffcd00;}
.ligne.letter-f::after {border-color: transparent #f69a40;}
.ligne.letter-g::after {border-color: transparent #ea4443;}
.ligne.letter-h::after {border-color: transparent #ea4443;}

.wrap-ges {
    border: 2px solid #5688b8 !important;
}

div[class*="ges-letter"] {
    border-top-right-radius: 50px 50px;
    border-bottom-right-radius: 50px 50px;
}

.ges-letter-a {width: 20% !important;background-color: #a1dbfa;}
.ges-letter-b {width: 25% !important;background-color: #8cb2d6;}
.ges-letter-c {width: 30% !important;background-color: #7591b2;}
.ges-letter-d {width: 36% !important;background-color: #606f8f;}
.ges-letter-e {width: 41% !important;background-color: #4c5172;}
.ges-letter-f {width: 47% !important;background-color: #383553;}
.ges-letter-g {width: 55% !important;background-color: #231836;}

.ges-ligne {
    height: 24px;
    margin-bottom: 3px;
    font-weight: 600;
    font-size: .975rem;
}
.ges-ligne.active::after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.ges-ligne.active {
    height: 36px;
    font-size: 1.6rem;
    border: 1px solid #2d2d2d;
}

.dpe-passoire {
    right: -3px;
    bottom: 18px;
    padding-left: 4px;
    font-size: .7rem;
    font-weight: 600;
    color: #8f8f8f !important;
    padding: 20px 2px;
}

.ges-value::before {
    content: '';
    flex: 1 1;
    border-bottom: 1px solid;
    margin: auto;
}

.ges-value {
    top: 82px;
}

.wrap-ges {
    max-width: 415px;
}
@media screen and (min-width:1200px) {
    .wrap-ges {
        max-width: 270px !important;
    }
}

.en-cours {
    background-color: rgb(232 232 232 / 85%)!important;
    font-size: 1.5rem;
    font-weight: 500;
    color: #3b3b3b;
    letter-spacing: 2px;
}

@media screen and (max-width:450px) {
    .dpe-unit, .ges-unit {
        font-size: .47rem !important;
    }
    #side-box-wrap-inner, #side-box-left-box {
        border-width: 1px !important;
    }
    #side-box-wrap .text-secondary {
        font-size: 12px;
        letter-spacing: -.2px;
        line-height: 21.5px;
    }
    #side-box-wrap .col.fw-bold {
        font-size: 12px;
        line-height: 22.5px;
    }
}