.highcharts-legend-item text{
  font-weight: 400 !important;
}

/* ------------------------ custom text styles ------------------------ */
.highcharts-subtitle { display: none; }
.highcharts-stack-labels {
    visibility: hidden;
    pointer-events: none;
}

.custom-x-labels {
    overflow-wrap: break-word;
    word-break: break-word;
    width: 90px;
    text-align: center;
    transform: translateX(-25%);
    white-space: unset !important;
    font-size: 12px;
    line-height: 1.5em;
}

.custom-legend-title {
    font-size: 14px;
    font-weight: 500;
}


/* ------------------------  ------------------------ */
.charts-section .charts .views-element-container .highcharts-container {
    max-width: 100%;
    margin: 0 auto;
}

/* hide wrappers when in opposite page tab */
/*
    Fellows -> hide Young Affiliates
    Young Affiliates -> hide Fellows
 */
body.fellows .worldwide.young-affiliates,
body.fellows .snapshot.young-affiliates,
body.fellows .deeper.young-affiliates {
    display: none;
    pointer-events: none;
}

body.young-affiliates .worldwide.fellows,
body.young-affiliates .snapshot.fellows,
body.young-affiliates .deeper.fellows {
    display: none;
    pointer-events: none;
}


/* ------------------------ charts containers ------------------------ */
.worldwide,
.snapshot,
.deeper { margin: 3rem 0 6rem 0; }

.worldwide h3,
.snapshot h3,
.deeper h3 {
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 1rem;
    margin-top: 0;
    color: #174f63;
}


/* ------------------------ buttons to toggle charts in groups ------------------------ */
.worldwide .buttons,
.snapshot .buttons,
.deeper .buttons {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem 0;
}

.worldwide .buttons button.filter,
.snapshot .buttons button.filter,
.deeper .buttons button.filter {
    font-size: 14px;
    font-weight: 300;
    padding: .25rem 0;
    margin: 0 0 1rem 0;
    width: 100%;
    background-color: #FFF;
}


@media (min-width: 768px) {
    .worldwide .buttons,
    .snapshot .buttons,
    .deeper .buttons {
        flex-direction: row;
        justify-content: flex-end;
    }

    .worldwide .buttons button.filter,
    .snapshot .buttons button.filter,
    .deeper .buttons button.filter {
        font-size: 16px;
        font-weight: 500;
        padding: .5rem 1rem;
        margin: 0 0 0 1rem;
        width: fit-content;
    }
}


/* ------------------------ buttons colors by section ------------------------ */
/* all specific rows necessary because there's no active state on buttons, style based on wrapper selected class */

/* FELLOWS */
body.fellows .worldwide .buttons button.filter,
body.fellows .snapshot .buttons button.filter,
body.fellows .deeper .buttons button.filter {
    border: 2px solid var(--fellows);
    color: var(--fellows);
}

.worldwide.fellows.all .buttons button.all,
.worldwide.fellows.least .buttons button.least,
.worldwide.fellows.under .buttons button.under,
body.fellows .worldwide .buttons button.filter:hover,
.snapshot.fellows.gender .buttons button.gender,
.snapshot.fellows.region .buttons button.region,
.snapshot.fellows.field .buttons button.field,
body.fellows .snapshot .buttons button.filter:hover,
.deeper.fellows.gender .buttons button.gender,
.deeper.fellows.region .buttons button.region,
.deeper.fellows.field .buttons button.field,
body.fellows .deeper .buttons button.filter:hover {
    background-color: var(--fellows);
    color: #FFF;
}

/* YOUNG AFFILIATES */
body.young-affiliates .worldwide .buttons button.filter,
body.young-affiliates .snapshot .buttons button.filter,
body.young-affiliates .deeper .buttons button.filter {
    border: 2px solid var(--young);
    color: var(--young);
}

.worldwide.young-affiliates.all .buttons button.all,
.worldwide.young-affiliates.least .buttons button.least,
.worldwide.young-affiliates.under .buttons button.under,
body.young-affiliates .worldwide .buttons button.filter:hover,
.snapshot.young-affiliates.gender .buttons button.gender,
.snapshot.young-affiliates.region .buttons button.region,
.snapshot.young-affiliates.field .buttons button.field,
body.young-affiliates .snapshot .buttons button.filter:hover,
.deeper.young-affiliates.gender .buttons button.gender,
.deeper.young-affiliates.region .buttons button.region,
.deeper.young-affiliates.field .buttons button.field,
body.young-affiliates .deeper .buttons button.filter:hover {
    background-color: var(--young);
    color: #FFF;
}

/* ------------------------ charts positioning when selected class is active on grup wrapper ------------------------ */
.worldwide .charts,
.snapshot .charts,
.deeper .charts { position: relative; }

/* hidden by default */
.worldwide .charts .views-element-container,
.snapshot .charts .views-element-container,
.deeper .charts .views-element-container {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* show charts */
.worldwide.all .charts .views-element-container:first-child,
.worldwide.least .charts .views-element-container:nth-child(2),
.worldwide.under .charts .views-element-container:nth-child(3),
.snapshot.gender .charts .views-element-container:first-child,
.snapshot.region .charts .views-element-container:nth-child(2),
.snapshot.field .charts .views-element-container:nth-child(3),
.deeper.region .charts .views-element-container:first-child,
.deeper.gender .charts .views-element-container:nth-child(2),
.deeper.field .charts .views-element-container:nth-child(3) {
    visibility: visible;
    position: relative;
    pointer-events: all;
}

/* show specific stacked labels (library creates them after ?? -> need to be specificed hiding in css) */
.worldwide.all .charts .views-element-container:first-child .highcharts-stack-labels,
.worldwide.least .charts .views-element-container:nth-child(2) .highcharts-stack-labels,
.worldwide.under .charts .views-element-container:nth-child(3) .highcharts-stack-labels,
.snapshot.gender .charts .views-element-container:first-child .highcharts-stack-labels,
.snapshot.region .charts .views-element-container:nth-child(2) .highcharts-stack-labels,
.snapshot.field .charts .views-element-container:nth-child(3) .highcharts-stack-labels,
.deeper.region .charts .views-element-container:first-child .highcharts-stack-labels,
.deeper.gender .charts .views-element-container:nth-child(2) .highcharts-stack-labels,
.deeper.field .charts .views-element-container:nth-child(3) .highcharts-stack-labels {
    visibility: visible;
    pointer-events: all;
}

.directory-page .charts div.charts-highchart .highcharts-container .highcharts-root,
.directory-page .charts div.charts-highchart .highcharts-container,
.directory-page .charts div.charts-highchart{
  overflow: visible !important;
}


/*RESPONSIVE FIX*/
@media (max-width:768px){
  .directory-page .charts div.charts-highchart .highcharts-container svg rect.highcharts-background,
  .directory-page .charts .view-chart-map-prova .highcharts-legend-box,
  .directory-page .charts div.charts-highchart .highcharts-container svg,
  .directory-page .charts div.charts-highchart .highcharts-container {
    width: 100% !important;
    DISPLAY: BLOCK;
  }
}