/*****************************^ General Plotly Settings *****************************************************/
/* Makes the random hidden text boxes at the corners of plot charts unclickable. */
.edrag, .wdrag, .ndrag, .sdrag{
    pointer-events:  none !important;
  }
  
/* Makes the x and y axes bar grid transparent */
#outcome-progress-plot .yzl.zl.crisp , #fte .yzl.zl.crisp, #fte .xzl.zl.crisp{
  stroke: rgba(0,0,0,0) !important;
}

/* Plotly Selectors for plot text colors */
.js-plotly-plot .gtitle, /* Plot title */
.js-plotly-plot .ytitle,  /* y-axis title */
.js-plotly-plot .xtitle,  /* x-axis title */
.js-plotly-plot .legendtext, /* legend text */
.js-plotly-plot .legendtitletext,
.js-plotly-plot .annotation-text, /* annotation text */
.js-plotly-plot .xaxislayer-above text, /* x-axis tick mark text */
.js-plotly-plot .yaxislayer-above text, /* y-axis tick mark text */
.js-plotly-plot .cbaxis.crisp text, /* Color bar axis text */
  #zipcode-plot .cbaxis.crisp, /* zipcode plot color bar */
  #outcome-domains-plot .textpoint text,
  #funding-status-month .annotation-text
{
  fill:var(--modebar-icon-color) !important;
}

#outcome-domains-plot .ygrid, #outcome-domains-plot .xgrid{
  stroke:var(--domains-plot-grid-color) !important;
}
/* Setting a border on a choropleth map */
.mapboxgl-map{
  border:8px solid var(--map-border);
}

/*********************************************************************** Finance Page Plotly Setting **************************************************************/

/* On screens with width <= 500 px */
  @media (max-width: 500px){
  
    #funding-status-month .annotation-text[data-unformatted="No<brData"]{
      transform: translateX(1.5rem);
    }
  } 
  
  /** Sankey Plot **/
  /* Sets the relative height of the Sankey plot 
     (needed so the Sankey is big enough)*/
  .sankey-style{
    height: 65rem !important;
  }
  /* Hides the Plotly Reset View button on the sankey which seems to be bugged.*/
  #sankey-fig a[data-title="Reset view"]{
    display: none;
  }
  /* Sets the node label colors in the Sankey plot */
  .node-label{
    fill:  var(--sankey-node-text-color)!important;
    text-shadow: var(--sankey-outline-color) 1px 1px 1px, var(--sankey-outline-color-2) 0 0 0.5em , 0 0 0.5em black !important;
  }

  /* #sankey-fig g.sankey:first-of-type g.sankey-links{
    color: black !important;
    fill: black !important;
    stroke: black !important;
  } */

  /********************************************************* Direct Impacts Plotly Settings ****************************************************/

  #gender-plot .bartext{
    font-size: 18px !important;
  }

  /* set hiehgts for plots so they dont jump out of the modal */
   #clients-served-plot{
    height: 30rem !important;
  }

  #gender-plot{
    height: 25rem !important;
  }
  #race-plot, 
  #ethnicity-plot{
    height:28rem !important;
  }
  /* Resize the plots at the xs->sm breakpoint. */
  @media(max-width:575px){
    #race-plot, 
    #ethnicity-plot{
        height:32rem !important;
    }
  }

  /* For screen widths <= 499px */
  @media (max-width: 499px){
    .impacts-plot .annotation-text[data-unformatted="No Data"]{
      font-size: 13px !important;
    }
  
    #clients-served-plot .annotation-text[data-unformatted="No Data Available"],
    #age-plot .annotation-text[data-unformatted="No Data Available"]{
      font-size: 28px !important;
    }
  
    #ethnicity-plot .annotation-text[data-unformatted="No Data Available"],
    #race-plot .annotation-text[data-unformatted="No Data Available"],
    #gender-plot .annotation-text[data-unformatted="No Data Available"],
    #zipcode-plot .annotation-text[data-unformatted="No Data Available"]{
      font-size: 30px !important;
    } 
  }
  

  /* For screen widths between 351px and 375px */
  @media (max-width: 375px){
    
    /* Translates the warning images slightly on screens with widths between 351px and 375px */
    #ethnicity-plot image, 
    #race-plot image,
    #zipcode-plot image{
      transform:translate(0.33rem, 1.4rem);
    }
    #gender-plot image{
      transform:translate(0rem, 1rem);
    }
  }
  
  /* For screen widths <= 350px */
  @media (max-width: 350px){
    /* Rotates and slightly translates the No Data annotations on the impacts page. */
    .impacts-plot .annotation-text[data-unformatted="No Data"]{
      rotate: 20deg;
      transform:translate(0.545rem);
    }
    
    /* Sets the font-size of the No Data Available annotations on the clients served and age plots*/
    #clients-served-plot .annotation-text[data-unformatted="No Data Available"],
    #age-plot .annotation-text[data-unformatted="No Data Available"]{
    font-size: 22px !important;
  
    }
  
    /* Sets the font-size of No Data Available annotations on the gender plot */
    #gender-plot .annotation-text[data-unformatted="No Data Available"]{
    font-size: 28px !important;
    }
  
    /* Translates the warning images on screens with widths <= 350px */
    #clients-served-plot image,
    .age-plot image,
    #gender-plot image{
      transform: translate(-0.3rem, 0rem);
    }
    #ethnicity-plot image, 
    #race-plot image,
    #zipcode-plot image{
      transform:translate(0rem, 1.5rem);
    }
    /* Moves the legend down slightly for the age plot to prevent overlap with the x-axis labels */
    .age-plot g.legend{
      transform:translate(25%, 70%)
    }
  }

  #zipcode-plot .annotation-text{
    fill:var(--modebar-icon-color)  !important;
  }
  #zipcode-plot .annotation-text[data-unformatted="No Data Available"]{
    fill:black !important;
  }

/*************************************************************** Indirect Impacts Plotly Settings *************************************************/


/* setting black text */
#support-types-plot .js-plotly-plot .legendtext ,
#organization-sector-plot .js-plotly-plot .legendtext,
#target-populations-plot .js-plotly-plot .annotation-text,
#support-types-plot .js-plotly-plot .annotation-text,
#organization-sector-plot .js-plotly-plot .annotation-text,
#support-types-plot .js-plotly-plot .modebar-btn svg path,
#organization-sector-plot .js-plotly-plot .modebar-btn svg path {
  fill: black !important;
}

/* waffle chart border */
#organization-sector-plot,
#support-types-plot{
  border: 10px solid var(--map-border);
  padding-right: 2px;
  padding-bottom: 2px;
  background-color: var(--map-border);
}

@media (max-width: 768px) {
  #organization-sector-plot,
  #support-types-plot{
    border: 1px solid var(--map-border);
    padding-left: 7px;
    padding-bottom: 7px;
    padding-right: 7px;
    padding-top: 7px;
    background-color: var(--map-border);
  }
}

@media (max-width: 500px) {
  #organization-sector-plot,
  #support-types-plot{
    border: 1px solid var(--map-border);
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-top: 5px;
    background-color: var(--map-border);
  }
}

/* during off the waffle chart markers */
#organization-sector-plot g.overplot .point,
#support-types-plot g.overplot .point{
    display:none;
}


/* changing annotation font size */
@media (max-width: 500px) {
  #target-populations-plot .js-plotly-plot .annotation-text, 
  #support-types-plot .js-plotly-plot .annotation-text, 
  #organization-types-plot .js-plotly-plot .annotation-text, 
  #organization-sector-plot .js-plotly-plot .annotation-text {
    font-size: 20px !important;
  }
}

/* set plot heights- needed to prevent figure from jumping out of modal */
#organization-types-plot{
    height:30rem !important;
}

@media(max-width:500px){
  #organization-types-plot{
      height:25rem !important;
  }
}

#target-populations-plot{
    height:20rem !important;
}


/*************************************************************** Outcomes Progress Plotly Settings *************************************************/
 /** Progress Plot **/
  /* Sets the height of the progress plot - needed for centering spinner */
  #outcome-progress-plot{
    height: 35rem;
    min-height: 32rem;
  }

  #outcome-domains-plot{
    max-width: none;
    width: 90%;
    justify-self: center;
  }
  @media (max-width:1200px){
    #outcome-domains-plot{
      max-width: none;
      width:100%;
    }
  }
  /** Sets the font-size and text-alignment of the title 
      of the progress plot on mobile screens **/
  @media (max-width:630px){
    #outcome-domains-plot .annotation-text[data-unformatted="No Data Available"]{
      font-size:33px !important;
    }

  }
  @media (max-width: 500px){
    #outcome-progress-plot .gtitle{
      font-size: 17px !important;
      text-align: center !important;
    }
    
  }
    
  @media (max-width: 350px){
    #outcome-progress-plot .annotation-text[data-unformatted="No Data"]{
      rotate: -20deg;
    }}