/* ********** PIE CHART *************** */
svg.myfh-donutChart {
    overflow: visible;
    width: 100%;
    cursor: pointer;
    outline: none;
}

svg.myfh-donutChart .donut-background.decor {
    cursor: initial !important;
    pointer-events: none !important;
}

svg.myfh-donutChart:focus-visible {
    border: 3px dotted rgba(0, 0, 0, 0.3);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    outline: none;
}

svg.myfh-donutChart * {
    transform-box: view-box;

    -ms-transform-origin: center;
    -o-transform-origin: center;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;

    /* -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in; */

    visibility: visible;
}

svg.myfh-donutChart g {
    -webkit-transition: transform 0.4s ease-out;
    -moz-transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
}

body.hasHover svg.myfh-donutChart .decor:hover {
    transform: none;
}

svg.myfh-donutChart g path {
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);

    -webkit-transition: scale 0.2s ease-out;
    -moz-transition: scale 0.2s ease-out;
    transition: scale 0.2s ease-out;

    cursor: pointer;
}

/*svg.myfh-donutChart g path.chart_hover*/
/*!*svg.myfh-donutChart g path:hover {*! {*/
/*    -webkit-transition: all 0.2s linear;*/
/*    -moz-transition: all 0.2s linear;*/
/*    transition: all 0.2s linear;*/
/*}*/

/*svg.myfh-donutChart g path.chart_hover,*/
/*svg.myfh-donutChart g path:hover,*/
/*svg.myfh-donutChart g path.chart_selected,
svg.myfh-donutChart g path.chart_clicked {
    -o-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
    !* transform: scale(1.04); *!

}*/
svg.myfh-donutChart g path.chart_selected {
    stroke: none;
}

svg.myfh-donutChart g path.chart_hover,
body.hasHover svg.myfh-donutChart g path:hover,
svg.myfh-donutChart g path.chart_selected:not(path.chart_focused) {
    -o-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);

    /* -o-transform: scale(1.03);
     -ms-transform: scale(1.03);
     -webkit-transform: scale(1.03);
     transform: scale(1.03);*/

    -webkit-transition: scale 0.2s linear;
    -moz-transition: scale 0.2s linear;
    transition: scale 0.2s linear;
}

svg.myfh-donutChart g path.chart_focused {
    /*-o-transform: scale(1.08);*/
    /*-ms-transform: scale(1.08);*/
    /*-webkit-transform: scale(1.08);*/
    /*transform: scale(1.08);*/

    /* -o-transform: scale(1.17);
     -ms-transform: scale(1.17);
     -webkit-transform: scale(1.17);
     transform: scale(1.17);*/

    -webkit-transition: scale 0.2s linear;
    -moz-transition: scale 0.2s linear;
    transition: scale 0.2s linear;
}


svg.myfh-donutChart g path.chart_inactive {
    pointer-events: none;
    opacity: 0.1;

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

svg.myfh-donutChart [id^="subPie-"] {
    visibility: visible;

    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);

    -webkit-transition: transform 0.1s ease-in;
    -moz-transition: transform 0.1s ease-in;
    transition: transform 0.1s ease-in;

}


svg.myfh-donutChart .chart_hidden {
    visibility: hidden;

    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);

    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;

    opacity: 0;
    pointer-events: none;

}

svg.myfh-donutChart .loadingArc {
    pointer-events: none;
}


svg.myfh-donutChart .loadingArc.chart_hidden {

    transition: all 0.5s ease-in;
    transform: none;
}


svg.myfh-donutChart [id^="subPie-"].chart_hidden {
    visibility: hidden;

    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);

    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;

    opacity: 0;
}


svg path.chart_visible {
    visibility: visible;
    opacity: 1;

    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);

}


/* ********** CHART LEGEND *********** */

.myfh-chartLegend:focus-visible {
    outline: 3px dotted rgba(0, 0, 0, 0.3);
    border-radius: 2px;

}

.myfh-chartLegend {

    font-size: 0; /*removes automatically added space*/
}

.myfh-chartLegend .subLegend {
    display: inline-block;
    padding: unset;
    border: unset;
}

.infoBox {

    padding: 2px 8px;
    display: block;
    font-size: 15px;
    column-span: all;
    border-bottom: 1px solid #e6e6e6;
}

.infoBox .info_color {
    display: inline-block;
    height: 16px;
    width: 16px;
    border-radius: 100px;
    position: relative;
    top: 2px;
}

.infoBox .info_text {


}

.myfh-chartLegend .itemDiv {
    display: inline-block;
}

.myfh-chartLegend-item {
    display: inline-flex;
    align-items: center;

    position: relative;

    padding: 8px 10px;

    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;

    font-family: "Brown-Pro-Regular" !important;
    font-size: 1rem;
    text-align: left;
    color: initial;


    cursor: pointer;

    --legendItemColor: black;
}

.myfh-chartLegend-item:focus-visible {
    outline: 2px dotted rgba(0, 0, 0, 0.3);
    border-radius: 1px;
}

body.hasHover .myfh-chartLegend-item:hover .white-text,
.myfh-chartLegend-item.chart_selected .white-text,
.myfh-chartLegend-item.chart_hover .white-text {
    color: white;
}


.myfh-chartLegend-item .white-text {
    transition: color 0.1s;
}

.myfh-chartLegend-item span.myfh-chartLegend-item-text {
    display: inline-block;
    position: relative;

    line-height: 1.1;
    font-family: 'Brown-Pro-Regular', sans-serif !important;
    font-weight: normal;
    font-size: 1rem;

    z-index: 2;
    pointer-events: none;
}

body.hasHover .myfh-chartLegend-item:hover,
.myfh-chartLegend-item.chart_hover,
.myfh-chartLegend-item.chart_selected {
    background-color: var(--legendItemColor);
    transition: all 0.2s ease-out;
}


body.hasHover .myfh-chartLegend-item:hover span.myfh-chartLegend-item-color,
.myfh-chartLegend-item.chart_hover span.myfh-chartLegend-item-color,
.myfh-chartLegend-item.chart_selected span.myfh-chartLegend-item-color {

    border: 2px solid #fff;
}

.myfh-chartLegend-item span.myfh-chartLegend-item-color {
    display: inline-block;
    height: 1.1rem;
    width: 1.1rem;

    position: relative;

    margin-right: 8px;

    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;

    border-radius: 100%;
    border: 2px solid #fff;

    z-index: 1;
    pointer-events: none;
}

.myfh-chartLegend-item .myfh-chartLegend-item-color-wrapper {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}


.myfh-chartLegend-item {
    transition: background-color 0.1s ease-out;
}


body.hasHover .myfh-chartLegend-item:hover,
.myfh-chartLegend-item:focus {
    background-color: var(--legendItemColor);
    transition: background-color 0.1s ease-out;
}

@media screen and (max-width: 1000px) {
    .myfh-chartLegend-item {
        font-size: 1rem;
    }

    .myfh-chartLegend-item span.myfh-chartLegend-item-text {
        line-height: 1;
        padding: 0;
    }

    .myfh-chartLegend-item span.myfh-chartLegend-item-color {
        height: calc(1.0rem * 1); /* font-size  * line-height + padding  of myfh-chartLegend-item-text */
        width: calc(1.0rem * 1); /* font-size  * line-height + padding  of myfh-chartLegend-item-text */
    }
}

@media screen and (max-width: 600px) {
    .myfh-chartLegend-item {
        width: 100%;
        padding: 8px 5px 8px 10px;
    }
}


.visually-hidden {
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}