/*********** Start of A/B CSS **************/
body.versionA .scenario{
display: inline;
text-decoration: none;
background: url(../images/chart-icon-02.png) no-repeat right;
background-repeat: no-repeat;
padding-right: 20px;
/*line-height: 1.5em;*/
height: 20px;
border-bottom: 3px solid #D0E9F4;
box-shadow: inset 0 -5px 0 #D0E9F4;
cursor: pointer;
/*color: #000;*/

}
body.versionB .scenario{
display: inline;
text-decoration: none;
background: url(../images/chart-icon-version_b.png) no-repeat right;
background-repeat: no-repeat;
padding-right: 20px;
/*line-height: 1.5em;*/
height: 20px;
border-bottom: 3px solid #D0E9F4;
box-shadow: inset 0 -5px 0 #D0E9F4;
cursor: pointer;
/*color: #000;*/

}

body.versionB .line.selected, body.versionB .line.menuSelected{
  stroke: #ec008c !important;
}
body.versionA .line.selected, body.versionA .line.menuSelected{
  stroke: #ec008c !important;
  stroke-width: 2px ;
  /*pointer-events: visible;  */
}

body.versionA .dot.selected, body.versionA .dot.menuSelected{
  fill: #ec008c !important;
  /*pointer-events: visible;*/
}
body.versionB .dot.selected, body.versionB .dot.menuSelected{
  fill: #ec008c !important;
  /*pointer-events: visible;*/
}

body.versionA #tooltip span.proj{
  color: #ec008c;
  float: left;
  margin-right: 5px;
}
body.versionB #tooltip span.proj{
  color: #ec008c;
  float: left;
  margin-right: 5px;
}

body.versionA .summary, body.versionA .defaultSummary{
  width: 280px;
  font-size: 18px;
  font-weight: 500;
  color: #ec008c !important;
  margin-top: 20px;
  line-height: 1em;
}
body.versionB .summary, body.versionB .defaultSummary{
  width: 280px;
  font-size: 18px;
  font-weight: 500;
  color: #ec008c;
  margin-top: 20px;
  line-height: 1em;
}
/*********** END of A/B CSS **************/

body{
  background: white;
}

.state.styled-select{
  display: none !important;
}
#stateName #long_looking{
    display: inline-block;
    font-size: 12px;
    margin-left: 170px;
    color: #1696d2;
}
#stateName #short_looking{
    display: none;
    font-size: 12px;
    margin-left: 10px;
    color: #1696d2;
}
.fed_state{
    position: fixed;
    top: 70px;
    left: 650px;
    height: 35px;
    background-color: #efefef;
}
#fed_version{
    background-color: #1696d2;
    height: 15px;
    float: left;
    line-height: 15px;
    padding: 10px;
    padding-right: 24px;
    font-size: 13px;
    font-family: Georgia;
    font-style: italic;
    color: #fff;
    cursor: pointer;
}
#fed_version span img{
    position: absolute;
    left: 272px;
    top: 8px;
    height: 19px;
}

@media (max-width: 1000px) and (min-width: 768px) {
  .styled-select:not(.state){
    width: 200px !important; 
  }
  .styled-select:not(.state) select{
    width: 160px !important;
    font: 11px Lato !important;
  }
  div.reduction-type{
    left: 270px !important;
  }
  div.amount-type{
    left: 480px !important;
  }
  .fed_state{
    left: 389px !important;
  }
  #stateName #long_looking{
      display: none;
  }
  #stateName #short_looking{
      display: inline-block;
  }
  .refresh{
    left: 690px !important;
  }
  #yLabel{
    top: 180px !important;
  }
#tooltip h2{
  font-size: 18px;
}

#tooltip p:not(.summary):not(.defaultSummary){

  font-size: 14px;
  line-height: 1em;
}

.summary, .defaultSummary{
  font-size: 14px;
  line-height: 1em;
}
  circle.dot{
    /*display: none !important;*/
  }
}

@media only screen and (max-width: 768px) and (min-width: 100px) {
    #loading{
      left: -20px !important;
      width: 120% !important;
    }
    circle.dot, #header-pinned, .scrollFade, .xLabel.mid, .labelLine:not(.first):not(.last), #menuContainer, .projLabel {
      display: none !important;
    }
    #mobileTitle{
      font-size: 18px;
      display: block;
      position: fixed;
      top: 21px;
      left: 2px;
      color: #333;
      font-weight: 400;
    }
    #mobileStateName{
      display: block;
      position: fixed;
      top: 45px;
      left: 2px;
      color: #333;
      font-weight: 400;
    }
    .mobileHide{
      display: none;
    }
    #chart{
      top: 0px !important;
      left: 0px !important;
      background-color: white !important;
      /*height: 400px !importan;*/
      border-bottom: 2px solid #000;
    }
    #yLabel{
      z-index: 9 !important;
      right: -75px !important;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);    width: 180px !important;
      top: 240px !important
    }
    h1{
      font-size: 1.5em !important;
    }
    #main-text{
      width: 86% !important;
      left: 17px !important;
      margin-top: 210px;
    }
    #footer{
      width: 86% !important;
    }

    .styled-select{
      z-index: 100 !important;
    }

    #tooltip{
      background: none !important;
      top: 22% !important;
      z-index: 0;
      height: 200px;
    }
    #tooltip h2{
      font-size: 12px;
    }

    #tooltip p:not(.summary):not(.defaultSummary):not(.other){
      font-size: 13px !important;
      width: 100% !important;
    }
    .other{
      font-size: 13px !important;
      width: 50% !important;
    }
    /*#tooltip*/
    .summary, .defaultSummary{
      font-size: 13px !important;
      font-weight: 400 !important;
      width: 145px !important;
      left: 52%;
      position: fixed;
      top: 279px;
      background: rgba(255,255,255,.7);
    }
    #tooltip{
      font-size: 13px !important;
      left: 4px !important;
      top: 292px !important;
      width: 50% !important;
    }
    p.other{
      width: 100% !important;
    }
    #tooltip h2{
      font-size: 13px !important;
      left: 5px;
      position: fixed;
      top: 256px;
      letter-spacing: .5px;
    }
    #mobileMenu{
      display: block !important;
      position: fixed;
      z-index: 20;
      height: 30px;
      width: 100%;
      pointer-events: none; 
    }
    #hamburger{
      /*height: 28px;*/
      z-index: 21;
    }
    #hamburger img{
      width: 52%; 
      pointer-events: visible;
      position: fixed;
      top: 200px;
      left: 2px;
    }
    .mobile.logo{
      width: 204px;
      z-index: 30;
      position: fixed;
      top: 8px;
      display: block !important;
      left: 11px;
    }
  .styled-select.state select {
     background: transparent;
     /*width: 280px !important;*/
     height: 45px;
     padding-left: 10px;
     font: 18px Lato !important;
     color: #333 !important;
     line-height: 1;
     border: 0;
     border-radius: 0;
     /*-webkit-appearance: none;*/
  }
  .styled-select.state {
     /*display: block;*/
     left: 10px !important;
     width: calc(100% - 35px) !important;
     top: 255px !important;
     /*width: 280px !important;*/
     height: 45px;
     overflow: hidden;
     background: url(../images/new_arrow.png) no-repeat right #EFEFEF !important;
     border: none;
     position: fixed;
  }
  .styled-select.offender-type{
    left: 10px !important;
    width: calc(100% - 35px) !important;
    top: 90px !important;
  }
  .styled-select.reduction-type{
    left: 10px !important;
    width: calc(100% - 35px) !important;
    top: 145px !important;
  }
  .styled-select.amount-type{
    left: 10px !important;
    width: calc(100% - 35px) !important;
    top: 200px !important;
  }
  #mobileClose{
    position: fixed;
    top: 321px;
    width: 168px;
    z-index: 29;
    /* display: inline-block; */
    left: calc(50% - 98px);
    clear: both;
    border: 2px solid black;
    padding: 12px;
    border-radius: 23px;
    color: #000;
    letter-spacing: 1.5px;
    background-color: #fff;
  }
  #mobileClose img{
    display: block;
    top: 9px;
    left: 160px;
    position: absolute;

  }
  #stateImg{
    display: none !important;
  }
  .menuBg{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 400px;
    background-color: #fff;
    z-index: 29;
  }
  .hideChart{
    display: block !important;
    position: fixed;
    z-index: 30;
    left: calc(50% - 78px);
    width: 124px !important;
    top: 380px;
    border: 2px solid black;
    padding: 12px;
    border-radius: 23px;
    color: #000;
    letter-spacing: 1.5px;
    background-color: #fff;
    text-align: center;
  }

}
.mobile{
  display: none;
}
#mobileMenu{
  display: none;
}
/*@media (max-width: 590px) {
  div.amount-type{
    left: 8px;
    top: 60px;
  }
  .main-text{
    width: 88%;
  }
}*/

body {
  font: 16px Lato;
  color: #666;
  font-weight: 400;
  margin-top: 0;
  /*margin-right: 100px;*/
}

body p{
  line-height: 1.8em;
}
body li{
  line-height: 1.8em;  
}
.lede{
  font-size: 1.2em;
  font-weight: 300;
}
body p a{
text-decoration: none;
color:#1696d2;
}
body p a:hover{
  text-decoration: underline;
  color: #000;
}

h1{
font-weight: 100;
font-size: 2.25em;
color: #000;
}
h2{
  font-weight: 100;
  font-size:1.75em;
  color: #000;
}
h3{
font-weight: 400;
font-size: 0.9em;
text-transform: uppercase;
color: #1696d2
}
h5{
  font-weight: 400;
  font-size: 0.9em;
  text-transform: uppercase;
  color: #333;
  margin-bottom: -23px;
  margin-top: 38px;
  margin-left: 4px;
}

.inline-chart{
width: 100%;
max-width: 500px;
display: block;
margin: 0 auto;
}


.scenario:hover{
background-color: #D0E9F4;
}


.axis path,
.axis line {
  fill: none;
  stroke: #333333;
  shape-rendering: crispEdges;
}

.axis path {
  display: none;
}

.axis text{
  color: #333333;
  font-size: 12px;
}
#yLabel{
  position: fixed;
  right: -15px;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  width: 79px;
  top: 160px;
}
.xLabel{
  opacity: 1;
  font-size: 12px;
  color: #333333;
}
.line {
  fill: none !important;
  /*stroke: #EFEFEF;*/
  /*stroke-width: 1px;*/
  pointer-events: none;
}

#chart{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 120px;
  pointer-events: none;
}
#main-text{
  width: 260px;
  /*font-size: 14px;*/
  /*font-family: Lato;*/
  position: absolute;
  left: 60px;
  top: 35.5%;
  z-index: -1;
}

#methodology-text{
  max-width: 650px;
  margin: 0 auto;
  top: 200px;
  position: relative;
  margin-bottom: 100px;
}

#links{
  display: inline-block;
  float: right;
  width: 50%;
  padding-left: 20px;
  padding-top: 120px;
}

#links a{
  text-decoration: none;
  color: #1696d2;
  font-size: 17px;
}

.trigger{
  cursor: pointer;
}
.dot{
  /*pointer-events: none;*/
  stroke: none !important;
  /*opacity: 1;*/
  fill: #EFEFEF;
  pointer-events: none; 


}
.mouseoverText{
  font-size: 12px;
  /*font-family: Lato;*/
  color: #333333;
  pointer-events: none;
}
.mouseoverBackground{
  fill: #fff;
  pointer-events: none;
}

.x.axis{
  display: none;
}

.line.actual{
  stroke: #1696d2 ;
  stroke-width: 2px;
}
.line.noPolicy{
  stroke: #333 ;
  stroke-width: 2px;
}

.line.highlighted{
  stroke: #868686;
  /*pointer-events: visible;*/

}
.dot.actual{
  fill: #1696d2 ;
}
.dot.noPolicy{
  fill: #333 ;
}
.dot.highlighted{
  fill: #868686;
  /*pointer-events: visible;*/
}

.trigger{
  pointer-events: none;
}
.highlighted .trigger, .selected .trigger, .actual .trigger, .noPolicy .trigger, .trigger.highlighted, .menuSelected .trigger{
  pointer-events: visible;
}

.projLabel{
  fill: #9A9A9A;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 1px;  
}
/*.trigger.on{
  pointer-events: visible;
}
.trigger.off{
  pointer-events: none;
}
*/

.styled-select.filter select{
  /*pointer-events: none; NOT SURE ABOUT THIS IN IE NEED TO TEST*/
}
/*Dropdowns*/
.styled-select select {
   background: transparent;
   width: 330px;
   height: 45px;
   padding-left: 10px;
   font: 16px Lato;
   /*font-size: 16px;*/
   color: #818385;
   line-height: 1;
   border: 0;
   border-radius: 0;
   -webkit-appearance: none;
}
select::-ms-expand {
 display: none !important;
}
.styled-select {
   top: 125px;
   width: 280px;
   height: 45px;
   overflow: hidden;
   background: url(../images/new_arrow.png) no-repeat right #EFEFEF;
   border: none;
   z-index: 2;
   position: fixed;
   overflow: hidden;
}

.styled-select.state{
  /*display: none;*/
  top: 74px;
  left: 240px;
  width: 120px;
  height: 45px;
  overflow: hidden;
  /*background: url(../images/state_arrow.png) no-repeat right transparent;*/
  background: none;
  border: none;
  z-index: 2;
  position: fixed;
}

#stateImg{
  position: absolute;
  display: block;
  top: 6px;
  background-color: white;
  pointer-events: none;
  left: 10px;
  border: 10px solid white;
}
#stateName{
  z-index: 9;
  position: fixed;
  top: 76px;
  left: 60px;
  font-size: 24px;
}

#menuContainer{
  width: 100%;
  height: 140px;
  position: fixed;
  background: #fff;
}

*:focus{
outline:none;
}

.offender-type{
  left: 60px;
}
.amount-type{
  left: 660px;
}
.reduction-type{
  left: 360px;
}


/*Tooltip styles*/
#tooltip{
  z-index: 10;
  position: fixed;
  bottom: 10%;
  left: 3000px;
  background-color: rgba(255,255,255,.8);
}

/*#helpText{
  position: fixed;
  font-size: 14px;
  font-style: italic;
  line-height: 1.2em;
  font-weight: 400;
  top: 420px;
  width: 240px;
  pointer-events: none;
}*/

#tooltip h2{
  font-size: 20px;
  font-weight: normal;
}

#tooltip p:not(.summary):not(.defaultSummary){
  color: #818385;
  line-height: 1em;
  font-size: 18px;
  width: 250px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 0px;
}


.summary span{
  float: none;
}
    

    /*HEADER*/
    #header-pinned {
        position: fixed;
/*        top: -50px;*/
        left: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #e6e5e5;
        z-index: 999;
        -webkit-transition: top 0.25s linear;
        -moz-transition: top 0.25s linear;
        -o-transition: top 0.25s linear;
        transition: top 0.25s linear;
    }
    
    #header-pinned .content {
        height: 49px;
        max-width: 1500px;
        margin: 0 auto;
        position: relative;
    }
    #header-pinned * {
  color: #333;
        font-weight: 400;
        text-decoration: none;
}
    
    #header-pinned .site-logo {
        display: block;
        width: 34px;
        height: 34px;
        position: absolute;
        left: 10px;
        top: 8px;
        background: url(http://www.urban.org/sites/all/themes/urban/images/logo-mini-dark.png) no-repeat;
        background-size: 34px 34px;
    }
    
        #header-pinned .title {
  font-size: 14px;
  line-height: 49px;
  margin: 0 65px 0 55px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
    
    
    #header-pinned .title {
        font-size: 20px;
        margin-left: 80px;
    }
    

    #header-pinned .title span,
    #header-pinned .title a {
        display: inline;
    }
    
    #header-pinned .share-icons {
        background-color: transparent;
        width: 69px;
        height: 50px;
        margin: 0;
        padding: 0;
        top: 0;
        width: 60px;
        position: absolute;
        right: 0;
    }
    
    #header-pinned .share-icons .shareThisP {
        border-top: 0;
        border-left: 1px solid #e6e5e5  ;
        height: 49px;
        padding: 9px 0 0;
    }
    
    #header-pinned .share-icons .shareThisB {
        float: none;
    }
    
    #header-pinned .share-icons .shareThisB {
        display: block;
        background-repeat: no-repeat;
        background-image: url(http://www.urban.org/sites/all/themes/urban/images/generated/icons-s8fe141aaaa.png);
        background-position: 0 -2396px;
        height: 32px;
        width: 32px;
        float: none;
        margin: 0 auto;
    }
    
    #header-pinned .share-icons .shareThisB:hover {
    background-position: 0 -1948px;
    }
    #header-pinned .share-icons .shareThisW {
        display: none;
        float: none;
        top: 50px;
        right: 0;
        left: auto;
        width: 300px;
        text-align: right;
        border: 0;
        background: transparent;
    }
    
    #header-pinned .share-icons .shareThisW {
        background-color: #fff;
        border: 1px solid #ccc;
        position: absolute;
        top: 42px;
        left: -138px;
        padding: 0 0 9px;
        border-top: 0;
        width: 200px;
    }
    
    #header-pinned .share-icons .addthis_toolbox {
        display: inline-block;
        width: auto;
        border: 1px solid #e6e5e5  ;
        border-top: 0;
        background: #fff;
        padding: 10px 10px 0 0;
        margin: 0 auto;
    }
    
    #header-pinned .share-icons .at15t_twitter.at16t_twitter,
    #header-pinned .share-icons .addthis_button_facebook {
        display: block;
        background-repeat: no-repeat;
        background-image: url(http://www.urban.org/sites/all/themes/urban/images/generated/icons-s8fe141aaaa.png);
        background-position: 0 -2056px;
        height: 32px;
        width: 32px;
    }


    #header-pinned .share-icons .at15t_twitter.at16t_twitter,
    #header-pinned .share-icons .addthis_button_facebook:hover {
        background-position: 0 -1609px;
 
    }
    
    #header-pinned .share-icons .at15t_twitter.at16t_twitter,
    #header-pinned .share-icons .addthis_button_twitter {
        display: block;
        background-repeat: no-repeat;
        background-image: url(http://www.urban.org/sites/all/themes/urban/images/generated/icons-s8fe141aaaa.png);
        background-position: 0 -1169px;
        height: 32px;
        width: 32px;
    }

       #header-pinned .share-icons .at15t_twitter.at16t_twitter,
    #header-pinned .share-icons .addthis_button_twitter:hover {
        background-position: 0 -1577px;
    }
    
    #header-pinned .share-icons .at15t_linkedin.at16t_linkedin,
    #header-pinned .share-icons .addthis_button_linkedin {
        display: block;
        background-repeat: no-repeat;
        background-image: url(http://www.urban.org/sites/all/themes/urban/images/generated/icons-s8fe141aaaa.png);
        background-position: 0 -1641px;
        height: 32px;
        width: 32px;
    }
    
           #header-pinned .share-icons .at15t_linkedin.at16t_linkedin,
    #header-pinned .share-icons .addthis_button_linkedin:hover {
        background-position: 0 -1379px;
    }

    #header-pinned .share-icons .at15t_google_plusone_share.at16t_google_plusone_share,
    #header-pinned .share-icons .addthis_button_google_plusone_share {
        display: block;
        background-repeat: no-repeat;
        background-image: url(http://www.urban.org/sites/all/themes/urban/images/generated/icons-s8fe141aaaa.png);
        background-position: 0 -1719px;
        height: 32px;
        width: 32px;
    }
    
    #header-pinned .share-icons .at15t_email.at16t_email,
    #header-pinned .share-icons .addthis_button_email {
        display: block;
        background-repeat: no-repeat;
        background-image: url(http://www.urban.org/sites/all/themes/urban/images/generated/icons-s8fe141aaaa.png);
        background-position: 0 -1449px;
        height: 32px;
        width: 32px;
    }

               #header-pinned .share-icons .at15t_email.at16t_email,
    #header-pinned .share-icons .addthis_button_email:hover {
        background-position: 0 -1271px;
    }
    
    #header-pinned .share-icons [class^="addthis_button_"] {
        display: inline-block !important;
        margin: 0 0 0 10px;
    }
    
    #header-pinned .share-icons .addthis_toolbox a {
        margin-bottom: 5px;
    }
    
    .at_a11y{
     display: none;
    }

    /*end css for header*/


.refresh{
 z-index: 3;
 display: block;
 position: fixed;
   top: 125px;
   left: 950px;
        background-repeat: no-repeat;
        background-image: url(http://www.urban.org/sites/all/themes/urban/images/generated/icons-s8fe141aaaa.png);
        background-position: 0 -1519px;
        height: 35px;
        width: 45px;
}
.refresh:hover{
        background-position: 0 -1751px;
}

#loading{
  width: 100%;
  height: 5000px;
  z-index: 70;
  background: #fff;
  position: fixed;
  pointer-events: none;
}

#loading img{
  z-index: 71;
  position: fixed;
  left: calc(50% - 25px);
  width: 50px;
  top: 35%;
}

.divider{
    width: 150px;
    display: inline-block;
    border: 3px solid #1696d2;
    margin-top: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.credit{
    font-size: 0.9em;
    margin-bottom: 2em;
    margin-top: 0px;
    line-height: 1.2em;
}

.credit a{
  color:inherit;
display: inline;
text-decoration: none;
height: 20px;
border-bottom: 3px solid #D0E9F4;
box-shadow: inset 0 -5px 0 #D0E9F4;
cursor: pointer;
/*color: #000;*/

}
.credit a:hover{
background-color: #D0E9F4;
}

.copy{
font-size: 0.75em;
}

#footer{
  background-color: #f3f3f3;
  padding:25px;
  width: 100%;

  margin-bottom: 15px;
}

#footer p{
    font-size: 12px;
    font-style: italic;
    line-height: 19px;
}

textarea{
  width: 100%;
}

/*IE JUNK*/
#stateImg.ie{
  top: 4px !important;
  left: 0px !important;
}
.state.styled-select.ie:not(.mobile){
  top: 51px !important;
  height: 85px !important;
}
.state.styled-select.ie:not(.mobile) select{
  margin-top: 20px;
}