.spider-chart-block {
    max-width: 790px;
    margin: 120px auto -40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.spider-chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 12px;
    font-size: 14px;
    position: absolute;
    top: 117px;
    left: 12px;
}

.spider-chart-block .spider-chart-heading h1 {
    color: #0EC76A;
    width: 100%;
    font-weight: 500;
    font-size: 36px;
    position: relative;
    top: 0px;
    letter-spacing: -0.5px;
    font-family: 'euclidcircularb-medium';
    display: flex;
    margin-bottom: 0px;
}

.spider-chart-legend .legend-item {
    display: inline-flex;
    align-items: flex-start;
    position: relative;
    flex-direction: column;
}

.spider-chart-legend .legend-item p {
    font-size: 14px;
    font-family: 'euclidcircularb-regular', Helvetica, Arial, sans-serif;
    color: #000000;
}

.spider-chart-legend .average-explanation p {
    width: 420px;
    background: #CFF4E1;
    border-radius: 6px;
    padding: 18px;
}

.spider-chart-legend .legend-item .average-explanation p {
    display: none;
}

.legend-avg-info-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    min-width: 25px;
}

.spider-chart-legend .legend-item .average-explanation img {
    display: flex;
}

.legend-avg-info {
    cursor: pointer;
}

.spider-chart-legend .legend-item .average-explanation.active p {
    display: block;
}

.legend-item .legend-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.spider-chart-wrapper {
    position: relative;
    width: 100%;
    max-width: 766px;
    height: 706px;
    left: -12px;
}

.spider-chart-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Legend */

.legend-growth {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.legend-growth b {
    font-weight: 700;
}

.growth-bar {
    display: inline-flex;
    overflow: hidden;
    height: 12px;
    width: 165px;
}

.growth-bar .seg {
    flex: 1;
}

.growth-bar .s1 {
    background: rgba(34, 197, 94, 0.18);
}

.growth-bar .s2 {
    background: rgba(34, 197, 94, 0.28);
}

.growth-bar .s3 {
    background: rgba(34, 197, 94, 0.40);
}

.growth-bar .s4 {
    background: rgba(34, 197, 94, 0.55);
}

.growth-bar .s5 {
    background: rgba(34, 197, 94, 0.72);
}

.growth-bar .seg+.seg {
    box-shadow: unset;
}

.legend-growth {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legend-growth b {
    font-weight: 700;
}

.growth-bar .seg {
    flex: 1;
}

.growth-bar .s1 {
    background: rgba(34, 197, 94, 0.18);
}

.growth-bar .s2 {
    background: rgba(34, 197, 94, 0.28);
}

.growth-bar .s3 {
    background: rgba(34, 197, 94, 0.40);
}

.growth-bar .s4 {
    background: rgba(34, 197, 94, 0.55);
}

.growth-bar .s5 {
    background: rgba(34, 197, 94, 0.72);
}

.growth-bar .seg+.seg {
    box-shadow: unset;
}

.average-explanation p {
    font-size: 12px;
    line-height: 16px;
    width: 930px;
}

.average-explanation {
    bottom: -57px;
    font-size: 12px;
    left: 135px;
    position: absolute;
    display: flex;
    gap: 7px;
    align-items: center;
}

.average-explanation img {
    height: 25px;
}

.average-explanation p span.green {
    color: #10B981;
}

@media only screen and (min-width: 768px) {
    .average-explanation.desktop {
        display: flex;
        min-width: 25px;
        bottom: 17px;
    }

    .average-explanation.active {
        bottom: -56px;
    }

    .average-explanation.mobile {
        display: none;
    }
}

@media only screen and (max-width: 1250px) {
    .spider-chart-legend .average-explanation p {
        width: 290px;
    }

    .average-explanation {
        bottom: -80px;
    }

    .average-explanation.active {
        bottom: -72px;
    }
}

@media only screen and (max-width: 991px) {
    .spider-chart-block {
        /*max-width: 650px;
        max-height: 600px;
        padding: 50px;*/
    }

    .spider-chart-legend {
        left: 18px;
    }

    .spider-chart-legend .average-explanation p {
        width: 180px;
        font-size: 12px;
        padding: 13px;
    }

    .average-explanation .legend-avg-info-btn {
        height: 23px;
        top: -2px;
        left: 0px;
        position: relative;
    }

    .average-explanation.active .legend-avg-info-btn {
        top: 26px;
    }

    .average-explanation p {
        width: 100%;
    }

    .average-explanation {
        left: 136px;
        bottom: -80px;
    }
}

@media only screen and (max-width: 790px) {
    .average-explanation.active {
        bottom: -90px;
        width: 220px;
    }

    .average-explanation .legend-avg-info-btn {
        top: 0px;
    }
}

@media only screen and (max-width: 768px) {
    .spider-chart-wrapper {
        height: 400px;
        max-width: 470px;
        left: 0px;
    }

    .spider-chart-block .spider-chart-heading h1 {
        top: -87px;
    }

    .legend-growth {
        gap: 6px;
    }

    .spider-chart-legend {
        top: 13px;
        left: 93px;
    }

    .spider-chart-legend .legend-item {
        font-size: 13px;
    }

    .spider-chart-block {
        margin: 180px auto 100px auto;
    }

    .spider-chart-block.active-info {
        margin: 110px auto 130px auto;
    }

    .average-explanation {
        bottom: -110px;
    }

    .spider-chart-legend .legend-item .average-explanation.desktop p {
        display: none;
    }

    .average-explanation.mobile {
        display: flex;
        padding: 0px 30px;
    }

    .average-explanation.mobile .legend-avg-info-btn {
        display: none;
    }

    .average-explanation {
        left: 0px;
    }

    .average-explanation img {
        top: unset;
    }

    .average-explanation p {
        background: #CFF4E1;
        border-radius: 6px;
        padding: 13px;
        color: #131314;
        display: none;
    }

    .spider-chart-block.active-info .average-explanation.mobile p {
        display: block;
    }

    .average-explanation.desktop.active,
    .average-explanation.desktop {
        bottom: 18px;
        width: 25px;
        left: 132px;
    }

    .average-explanation .legend-avg-info-btn,
    .average-explanation.active .legend-avg-info-btn {
        top: 0px;
    }
}

@media only screen and (max-width: 680px) {
    .spider-chart-legend {
        top: -10px;
        left: 0px;
        right: 0px;
    }

    .spider-chart-legend .legend-item {
        align-items: center;
    }

    .growth-bar {
        display: inline-flex;
        overflow: hidden;
        height: 9px;
        width: 156px;
    }
}

@media only screen and (max-width: 640px) {
    .average-explanation.mobile {
        display: flex;
        padding: 0px 20px;
    }
}

@media only screen and (max-width: 600px) {
    .average-explanation {
        bottom: -110px;
        padding: 0px 20px;
    }

    .average-explanation.desktop {
        padding: 0px;
    }

    .average-explanation p {
        font-size: 11px;
        padding: 9px 10px;
    }
}

@media only screen and (max-width: 425px) {
    .spider-chart-canvas {
        padding: 13px;
    }

    h2.marketing-results-title {
        font-size: 30px;
        line-height: 38.4px;
    }

    .spider-chart-block {
        margin: 100px auto -45px auto;
    }

    .spider-chart-block.active-info {
        margin: 100px auto 40px auto;
    }

    .average-explanation p {
        font-size: 10px;
    }

    .average-explanation {
        bottom: -80px;
    }

    .spider-chart-legend {
        top: 20px;
    }

    .spider-chart-block .spider-chart-heading h1 {
        font-size: 30px;
        position: relative;
        top: -31px;
    }
}