#loadingContainer{
  position: absolute;
  width: 100%;
  background: rgba(255,255,255,.95);
  height: 1220px;
  z-index: 100;
  left: 0px;
}
#loadingGif img{
    margin: 0 auto;
    display: block;
    margin-top: 60px;
    width: 75px;
}
#loadingText{
    font-size: 20px;
    margin: 0 auto;
    margin-top: 30px;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-style: italic;
    color: #adabac;
}


.axisLine{
  /*stroke-dasharray: 4 4;*/
  stroke-width: 1.5px;
}
.axisLine.zero{
  stroke: #000;
}
.axisLine.tcja{
  stroke: #fcb64b;
  stroke-dasharray: 4 4;
  stroke-width: 2px;
}
.tick line{
  stroke: #bcbec0;
  /*stroke-width: 2px;*/
  opacity: .8;
}


.axisLabel{
  font-size: 14px;
  font-style: italic;
}
.y.axisLabel{
    position: absolute;
    top: 286px;
    left: -181px;
    transform: rotate(-90deg);
}

.x.axisLabel{
    position: relative;
    top: 27px;
    left: calc(50% - 141px);
    width: 282px;
    text-align: center;
}

.axisLabelText{
  display: inline-block;
}

.y.axisLabelTooltip, .x.axisLabelTooltip{
    width: 16px;
    display: inline-block;
    position: relative;
    left: 7px;
    top: 4px;
    cursor: pointer;
}


.quadGroup text{
  /*text-transform: uppercase;*/
  font-size: 12px;
  color: #000;
  text-anchor: start;
  font-family: "Avenir LT W01_65 Medium1475532","Avenir";
}
.quadGroup text.big{
  text-transform: uppercase;
  font-size: 14px;
  font-family: "Avenir LT W01_95 Black1475556","Avenir";
}
.quadArrow{
  fill: #000;
}


#legendBg{
  fill: rgba(255,255,255,.8);
  stroke: #bcbec0;
  stroke-width: 1px;
}
#legendTitle{
  font-size: 16px;
  font-weight: bold;
}
.legendText{
  font-size: 14px;
  font-weight: normal;
}
.bottomLegendText{
  font-style: italic;
}


#catLabels{
    position: absolute;
    top: -12px;
    left: 80px;
    width: 810px;
    opacity: 0;
}
.catLabel{
  display: inline-block;
  font-size: 18px;
}
.catDesc{
  font-family: "Avenir LT W01_95 Black1475556","Avenir";
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  color: #f0573e;

}
.catName{
  display: inline-block;
  font-family: "Avenir LT W01_95 Black1475556","Avenir";
  font-size: 14px;
  margin-left: 5px;
}
.catName.income{
  margin-right: 20px;
}

#incomeContainer{
  margin-bottom: 10px;
}
#filingContainer{
  margin-bottom: 20px;
}

.controlContainer{
  position: relative;
  height: 117px;
}
.controlContainer.checkboxes{
    position: relative;
    height: 166px;
    margin-top: 40px;
}
.controlTitle{
  font-size: 16px;
  position: absolute;
  top: -16px;
  color: #373a3c;
  font-family: "Avenir LT W01_65 Medium1475532","Avenir";
  /*font-family: "Avenir LT W01_95 Black1475556";*/
}
.controlTitle span, .controlInfo{
  display: inline-block;
}
.controlInfo img{
    width: 16px;
    position: relative;
    top: 4px;
    left: 5px;
    cursor: pointer;
}

.menuTitle{
  font-size: 16px;
  color: #373a3c;
  font-family: "Avenir LT W01_65 Medium1475532","Avenir";
  /*font-family: "Avenir LT W01_95 Black1475556";*/
}
.rangeLine{
  stroke: #c1c1c1;
  fill: none;
  stroke-width: 2px;
}
.rangeCheck{
  cursor: pointer;
  pointer-events: none;
}
.rangeDot.active{
  fill: #008bb0;
  stroke: #008bb0;
}
.rangeDot.highlight, .rangeDot.highlight.active{
  stroke: #174a7c !important;
  stroke-width: 4px;
}
.rangeDot{
  stroke-width: 2px;
  cursor: pointer;
  fill: #fff;
  stroke: #cccccc;
}
.rangeLabel{
  position: absolute;
  top: 8px;
  font-size: 12px;
  width: 100px;
  text-align: center;
  z-index: -1;
}
.rangeLabel.checkboxes{
    width: 220px;
    text-align: left;
    left: 24px;
    color: #cccccc;
}


.rangeLabel.active .topLabel, .rangeLabel.checkboxes.active{
  color: #008bb0;
}
.rangeLabel .topLabel{
  color: #cccccc;
}
.bottomLabel{
  top: 17px;
  position: relative;
  font-weight: bold;
}
.bottomLabel.tcja, .tcjaLabel{
  color: #fcb64b;
}
.pretcjaLabel{
  color: #000;
}











.tooltip{
  -webkit-box-shadow: 10px 10px 17px -6px rgba(0,0,0,0.44);
  -moz-box-shadow: 10px 10px 17px -6px rgba(0,0,0,0.44);
  box-shadow: 10px 10px 17px -6px rgba(0,0,0,0.44);
  background: #f7f7f9;
  
}
.input.tooltip{
  position: absolute;
  z-index: 10;
  padding: 18px;
  bottom: 108px;
  display: table;
  pointer-events: none;


}
.infoClose{
    position: absolute;
    top: 11px;
    width: 16px;
    right: 8px;
    cursor: pointer;
}
.infoTitle{
  font-family: "Avenir LT W01_95 Black1475556","Avenir";
}
.infoTitle.where{
  margin-top: 40px
}
.infoTitle.where img{
    width: 16px;
    top: 2px;
    left: 2px;
    position: relative;
    margin-right: 7px;
}
.info.tooltip{
    z-index: 100;
    position: absolute;
    padding: 20px;
    top: -20px;
}

.input.tooltip .ttContent{
      margin: 0 auto;
    display: block;
    width: fit-content;
}
.axis.tooltip{
    width: 260px;
    top: 20px;
    left: -57px;
    padding: 18px;
    font-size: 14px;
    z-index: 100;
    position: absolute;
    pointer-events: none;
}
.xaxis.tooltip{
    width: 260px;
    height: 145px;
    bottom: 100px;
    left: -87px;
    padding: 18px;
    font-size: 14px;
    z-index: 100;
    position: absolute;
    pointer-events: none;
}


.ttArrow{
      width: 50px;
    height: 25px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}
.ttArrow.left{
  left: 25px;
}
.ttArrow.right{
  right: -22px;
  left: unset;
}
.ttArrow.customX{
  left: 238px
}
.axis.tooltip .ttArrow{
  left: 43px;
}
.axis.tooltip.side .ttArrow{
    top: 80px;
    left: -36px;
    transform: rotate(90deg);
    overflow: hidden;
}
.axis.tooltip.side{
  -webkit-box-shadow: -7px 10px 17px -6px rgba(0,0,0,0.44);
  -moz-box-shadow: -7px 10px 17px -6px rgba(0,0,0,0.44);
  box-shadow: -7px 10px 17px -6px rgba(0,0,0,0.44);
}

.ttArrow::after{
     content: "";
     position: absolute;
     width: 20px;
     height: 20px;
     background: #f7f7f9;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     top: 0;
     left: 50%;
     /*box-shadow: 1px 1px 20px 0px rgba(0,0,0,0.6);*/
    
    box-shadow: 2px 1px 12px 2px rgba(0, 0, 0, 0.34);
    -moz-box-shadow: 2px 1px 12px 2px rgba(0, 0, 0, 0.34);
    -webkit-box-shadow: 2px 1px 12px 2px rgba(0, 0, 0, 0.34);
  }

.explore.tooltip{
    position: absolute;
    /*top: 370px;*/
    left: 70px;
    width: 340px;
    z-index: 100;
    padding: 20px;
    padding-bottom: 10px;
    font-size: 13px;
    background: rgba(255,255,255,.8);
    fill: #000 !important;
    color: #000 !important;
    pointer-events: none;
}
.ttRow{
  display: block;
  margin-bottom: 10px;
}
.ttRow.y{
  margin-bottom: 20px;
}
.ttTitle{
  display: inline-block;
  font-family: "Avenir LT W01_95 Black1475556","Avenir";
}
.ttValue{
  display: inline-block;
  margin-left: 5px;
  font-family: "Avenir LT W01_55 Roman1475520","Avenir","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.ttValue.tcjaLabel{
  color: #000 !important;
}
select{
  display: none;
}


#mobileExploreBg, #hideExplore, #showExplore{
  display: none;
}


/************************************************************/
/******************** PROTOTYPE CANVAS **********************/
/************************************************************/
path,
line {
  shape-rendering: crispEdges;
}



canvas {
  /*position: absolute;*/
}

svg {
  /*pointer-events: none;*/
}

.axis path{
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}
.y.axis path{
  display: none;
}
.x.axis path{
  /*stroke-width: 2px;*/
  display: none;
}

circle.highlightDot {
  stroke-width: 4px;
  stroke: #174a7c;
  fill: #174a7c;
}
circle.tcjaDot, circle.tcjaLegendDot{
  stroke-width: 4px;
  stroke: #fcb64b;
  fill: #fcb64b;
}
circle.pretcjaDot, circle.pretcjaLegendDot{
  stroke-width: 2px;
  stroke: #000;
  fill: #fff;
}



.pretcjaLegendLine{
  /*stroke-dasharray: 2 2;*/
  stroke: #000;
  stroke-width: 2px;
}

.hidden {
  display: none;
}

#datePublished{
  text-align: center;
    margin-bottom: 40px;
    font-size: 20px;
    font-style: italic;
    margin-top: -9px;
}

#controls{
  display: block;
}
.controlContainer{
/*  display: inline-block;
  margin-right: 40px;
  margin-top: 20px;*/
}

div.tempHighlight{
  background: #fdbf11;
}


/************************************************************/
/******************** ED FUNDING TEMPLATE *******************/
/************************************************************/
/*#sections{
  pointer-events: none;
  opacity: 0;
}
*/

body, svg text{
  font-family: "Avenir LT W01_55 Roman1475520","Avenir", "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.container {
  width: 1180px;
  margin: 0 auto;
}

#graphic {
  padding-top: 60px;
}

#topTitle{
  font-size: 30px;
  text-align: center;
  padding-bottom: 20px;
  font-family: "Avenir LT W01_95 Black1475556","Avenir";
}
#topText{
  margin-top: -140px;
  padding: 40px;
  margin-bottom:30px;
  font-size:21px;
  font-weight:400;
  color:#000;
  background: #fff; 
  z-index: 1000;
  position: relative;
}
.jumpTo{
  font-family: "Avenir LT W01_95 Black1475556","Avenir"; 
  font-style: italic;
}
.jumpTo span{
  color: #008bb0;
  cursor: pointer;
}
.jumpButton{
  display: block;
  position: absolute;
  top: 12px;
  right: 77px;
  text-transform: uppercase;
  border: 1px solid #bcbec0;
  padding: 5px 8px;
  color: #ffffff !important;
  background: #bcbec0;
  border-radius: 3px;
  cursor: pointer;
  width: 109px;
}
.bigCog{
    width: 15px;
    display: inline-block;
    margin-right: 5px;
    top: 2px;
    position: relative;
}
.jumpButton span{
  display: inline-block;
  color: #ffffff !important;
}
.jumpButton:hover{
  background: #008bb0;
  border: 1px solid #008bb0;
  /*color: white !important;*/
}
#topHR{
  width: 130px;
  height: 6px;
  background-color: #1696d2;
  margin: 0 auto;
  margin-bottom: 20px;
}


p{
  line-height:1.6;
  margin-bottom:15px !important;
}
.pHeader{
    font-size: 20px;
    display: block;
    margin-bottom: 10px;
}
#sections {
  position: relative;
  display: inline-block;
  width: 400px;
  top: 0px;
  z-index: 90;
  padding-bottom: 20px;
  pointer-events: auto;
}

.step {
  margin-bottom: 250px;
  font-family: "Avenir LT W01_55 Roman1475520","Avenir","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 23px;
  color: #000;
}
.firstStep{
  margin-top: 181px;
}
.smallStep{
  margin-bottom: 550px;
}
.penultimateStep{
  margin-bottom: 300px;
}
.title{
  font-size:18px;
   margin-top:40px;
  font-weight: bold;
  margin-bottom: 10px;
}
.subtitle{
  margin-top: -8px;
  font-size: 17px;
  font-style: italic;
  margin-bottom: 8px;
}
.mapButton{
    display: inline-block;
    cursor: pointer;
    color:#1696d2;
    font-style:italic;
    font-size:16px
}
#extra-space {
  height: 0px;
}

#vis {
  display: inline-block;
  z-index: 1;
  margin-left: 0;
  position: relative;
  /*top: 730px;*/
  float: right;
}
#vis svg{
  cursor: pointer;
position: absolute;
    left: 0px;
}
#vis svg.nonInteractive{
  cursor: auto;
}
#vis.posFixed{
  position: fixed;
  top: 20px;
  padding-left: 10px;
  margin-left: 60px;
}
#vis.posRelTop{
    position: relative;
    float: left;
    display: inline-block;
    margin-left: 460px;
}
#vis.posRelBottom{
    position: relative;
    float: inherit;
    margin-left: 55px;
    bottom: 637px;
    padding-left: 0px;
}
#vis.posRelBottomSingleCol{
  position: absolute;
  float: inherit;
  padding-left: 10px;
}
#vis.posRelTopSingleCol{
   position: absolute;
  float: inherit;
  padding-left: 10px; 
}
#clearSelected{
  display: block;
  position: fixed;
  right: 10px;
  bottom: 10px;
  font-size: 14px;
  font-style: italic;
  color: #9d9d9d;
  cursor: pointer;
  z-index: 999;
  background: rgba(255,255,255,.9);
  padding: 10px;
}

#dotChartYAxis path, #dotChartYAxis line{
  display: none;
}
.tick text{
  font-size: 12px;
  font-family: "Avenir LT W01_55 Roman1475520","Avenir","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.largeChartLabel, .largeScatterplotLabel{
  font-weight: bold;
  letter-spacing: 4px;
  fill: #9d9d9d;
  font-size: 14px;
}
.largeScatterplotLabel.shortGraphLargeLabel{
  letter-spacing: 3px;
}
text.dotChartLegend{
  font-family: "Avenir LT W01_55 Roman1475520","Avenir","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 12px;
}
.dotHoverRect{
  fill: none;
}
g.dotChartSelected .dotHoverRect{
  fill: #a2d3eb;
  opacity: 1;
}
g.dotChartSelected .dotHoverRect.dotTooltip{
  fill: #fff;
  opacity: .85;
}
g.dotChartClicked .dotHoverRect{
  opacity: .4;
}


.dotHoverText, .dotSumLine{
  opacity: 0;
  font-size: 14px;
}
.dotHoverText.text{
  fill: #9c9c9c;
}
g.dotChartSelected .dotHoverText, g.dotChartSelected .dotSumLine {
  opacity: 1;
}
g.dotChartSelected .dotHoverText.hidden, g.dotChartSelected .dotSumLine.hidden {
  opacity: 0;
}


#scatterPlotXAxis path, #scatterPlotYAxis path, #histXAxis path, #histYAxis path{
  display: none;
}


.note{
  font-size: 11px;
}
.note tspan{
  font-weight: bold;
}
.scatterAxis, .histAxis{
  stroke: #333;
}
.scatterGrid, .histGrid{
  stroke: #dcdbdb;
}
.scatterDot{
  fill: #1696d2;
}
.scatterDot.scatterSelected{
  fill: #fdbf11;
  opacity: 1 !important;
}
.scatterDot.scatterClicked{
  fill: #fdbf11;
  opacity: 1 !important;
}
.scatterOutlierLabel{
  font-size: 13px;
  font-weight: bold;
}

#scatterTooltipContainer .stateName, #scatterTooltipContainer .yearName{
  font-weight: bold;
  font-size: 14px;
}
#scatterTooltipContainer .subtitle{
  font-size: 12px;
  font-style: italic;
}


circle.morph{
  fill: none;
  stroke: none;
}
.mapImg{
  /*pointer-events: none;*/
}
.mapNY{
    position: absolute;
    top: -73px;
    left: 100px;
    width: 600px;
}
.mapFL{
    position: absolute;
    top: 0px;
    left: 90px;
    width: 600px;
}
.keyLabel{
  font-size: 12px;
}


.dotNote{
  display: block;
}
.mobileDotNote{
  display: none;
  font-style: italic;
}
.mobileDotNote span{
  font-weight: bold;
}
#mobile-notes{
  display: none;
}
#mobile-notes-text-dots{
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 5px;
  line-height: 1.6;
}
#mobile-notes-text-maps{
  font-size: 14px;
  line-height: 1.6;
}



.dotChartLine {
  stroke: #e3e3e3;
  stroke-width: 3;
}
.federalLine{
  stroke: #e3e3e3;
  stroke-width: 3;
}
.zeroLine{
  stroke: black;
}
.stateDot, .legendStateDot{
  fill: #46abdb;
}
.localDot, .legendLocalDot{
  fill: #12719e;
}
.federalDot, .legendFederalDot{
  fill: #062635;
}
.totalDot, .legendTotalDot{
  fill: #ec008b;
}



/********header (below urban menu)**********/
   

.headerimage{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 720px;
  z-index:-1;
}

.headerwrapper{
  padding-top:120px;
}

#heroimage{
   background-image: url("../images/header.jpeg");
   background-position: center;
     background-size: cover;
    background-repeat: no-repeat;
    width: 100%;

}


.div-title-block
{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  width:90%;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.4em;
  font-size: 2.3em;
  margin: auto;
}


@media (max-width: 2000px) {
  .headerimage{ height:600px;}
}
/*browser windows smaller than 850px*/
@media (max-width: 600px) {
   .headerimage{ height:300px;}
   .div-title-block {
    font-size: 1.6em !important;
   }
}

@media (max-width: 991px) {
   
   .headerwrapper{padding-top:125px;}
   
}

@media  (max-width: 480px) {
  .full-width-col { font-size:18px;}
   .container {margin-bottom: 40px; padding:0px 4px;}
   .headerimage{width: 100%; height: 300px;}
   .headerwrapper{padding-top:80px;}
   h1 { font-size:24px;}
 
}



.switch {
    background-image: url(../images/off-on.png);
    background-color: #696969;
    background-repeat: no-repeat;
    width: 83px;
    height: 26px;
    border-radius: 20px;
    background-size: cover;
    cursor: pointer;
    -webkit-transition:background-position .1s ease-in;  
    -moz-transition:background-position .1s ease-in;  
    -o-transition:background-position .1s ease-in;  
    transition:background-position .1s ease-in; 
}
.switch.off {
    background-position: -68px 0px;
    background-color: #696969;
}

.switch.on {
    background-position: -10px 0px;
    background-color: #1696d2;
}
.switch.off:hover{ 
  background-color: #333 !important;
}
.switch.on:hover{ 
  background-color: #12719e !important;
}
#buttonContainer{
  position: absolute;
  top: 58px;
  left: 130px;
  background: #f8f8f8;
  border: 1px solid #dcdbdb;
  width: 456px;
  height: 60px;
}
.scatterButton{
    display: block;
    position: absolute;
    bottom: 16px;
}
.scatterButton.nonInteractive{
  display: none;
}
.stateButton{
  left: 200px;
}
.localButton{
  left: 60px;
}
.federalButton{
  left: 355px;
}
.scatterButtonLabel{
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  bottom: 20px;
}
.scatterButtonLabel.local{
  left: 20px;
}
.scatterButtonLabel.state{
  left: 160px;
}
.scatterButtonLabel.federal{
  left: 300px;
}
.scatterButtonLabel.title{
  bottom: 53px;
  left: 0px;
  font-size: 16px;
}