/*https://jira.us.kworld.kpmg.com/browse/NORCCMS-20*/
.overlay {
  fill: none;
  pointer-events: all;
}

h1 {
    font-weight: bold;
    color: #111;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    margin-bottom: 5px;
    margin-left: 10px;
}

canvas {
    display: none;
}

#map-instructions {
    font-family: "HelveticaNeue Light", "Helvetica", "Arial", sans-serif;
    font-size: small;
    margin: 5px;
}


g.header,
g#trend_table,
.household_size_cross_tab tspan {
    font-family: 'Roboto Condensed', Arial, sans-serif;
}

.household_size_cross_tab tspan {
  font-size: 2em;
}

tspan.n_a{
  visibility:hidden;
}

text.chart-caption,
div.tooltip .links a,
div.loading,
text.x-axis-label,
text.y-axis-label {
    font-family: 'Roboto Condensed', Arial, sans-serif;
    text-transform: uppercase;
    font-weight:normal;
}

select.employment-year-selection {
    width: 100px;
    position: absolute;
    top: 375px;
    right: 60px;
    font-size: 1em;
    font-family: 'Roboto Condensed';
}

/* Properties don't cascade down from parent text.x-axis-label to child tspan; must explicitly target tspan*/
text.x-axis-label tspan,
text.y-axis-label tspan{
  font-size:0.8em;
}

#trend_table tspan.first-of-first {
  font-size:.9em;

}

.avg_kpi_group  .value {
    font-size: 1.3em;
  }

  /*Consider applying the Roboto font only to the class="value", so that class="label" (showing years) is distinguished*/
  .avg_kpi_group  {
      font-family: 'Roboto Condensed', Arial, sans-serif;
      font-weight: bolder;
  }

/*https://jira.us.kworld.kpmg.com/browse/NORCCMS-58*/
  .avg_kpi_group .label {
    font-size:1.25em;
    font-weight:normal;
  }

div.tooltip.showing {
    display:block;
    pointer-events: none;
}

div.tooltip .links,
div.tooltip .close-icon {
    pointer-events: all;
}


div.tooltip .links a {
    display: none;
    width: 50%;
    margin: 0px;
    text-align: center;
    float: left;
    box-sizing: border-box;
    background-color: rgb(66,146,198);
    color: white;
    line-height: 2em;
    font-size:.9em;
}

div.tooltip .links a:first-of-type{
    /*border-right: 2px solid rgb(8,48,107);*/
  }


  /*https://jira.us.kworld.kpmg.com/projects/NORCCMS/issues/NORCCMS-43?filter=allopenissues*/
    div.tooltip.pinned .links a {
        display: block;
    }
    /* Make it a bit shorter; real estate is more valuable now*/
    div.view-showing .tooltip .links a {
        line-height: 1.5em;
    }
    div.view-showing footer {
      /*Enough to clear the header*/
      margin-top:60px;

    }

    div.view-showing .links a,
    div.view-showing div.tooltip.pinned .links a{
        /*display: none;*/
    }

div.tooltip .links a:hover {
    background-color: rgb(33,113,181);
    cursor:pointer;
}

div.tooltip .links a:active {
    background-color: rgb(8,48,107);
    cursor:pointer;
}

div.tooltip .condition-name {
    font-size: 0.8em;
}

div.loading {
    background-color: rgba(0,0,0,0.6);
    color: white;
    font-size: 3em;
    position: absolute;
    width: 100%;
    height: 100%;
    display:none;
    /*Appear above the map, above the tooltip*/
    z-index:3;
}

/*Only when both map is showing and view is showing dipslay should be block;
If this were a NOT SHOWING concept, it would only be when map-is-not-loading
AND view-is-not-loading; both classes applied at the same time*/
div.map-load-showing .loading,
div.view-load-showing .loading,
div.load-showing .loading{
    display:block;
}

div.loading div {
  margin:auto;
  margin-top:40%;
  margin-left:35%;
}


div.tooltip .close-icon:hover {
  cursor:pointer;
  opacity:1;
}


div.tooltip .close-icon:active {
  opacity:0.2;
}

/* TODO: Not ALL the time it is showing, just when it is pinned!*/
div.tooltip.pinned .close-icon {
    display:block;
}

.date {
    font-family: "HelveticaNeue Light", "Helvetica", "Arial", sans-serif;
    font-size: small;
    margin-bottom: 0px;
    margin-left: 10px;
}

#counties {
    fill: rgba(173,173,173,.3); /* #adadad;*/
    stroke: #B0B0B0;
    stroke-width: 0.33px;
}

.stated {
    stroke-width: 1px;
    stroke: none;
}

.state-border {
    fill: none;
    stroke:rgba(0,0,0,.3);
    stroke-width: 1px !important;
    pointer-events: none;
}

.state-border.active {
    stroke: orange;
    stroke-width: 1px !important;
    pointer-events: none;
}

.overlay {
    fill: none;

}

/* County Shading - Quantized */
.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

.q0-9.stated { fill:rgb(247,251,255); stroke:rgb(247,251,255);}
.q1-9.stated { fill:rgb(222,235,247); stroke:rgb(222,235,247);}
.q2-9.stated { fill:rgb(198,219,239); stroke:rgb(198,219,239);}
.q3-9.stated { fill:rgb(158,202,225); stroke:rgb(158,202,225);}
.q4-9.stated { fill:rgb(107,174,214); stroke:rgb(107,174,214);}
.q5-9.stated { fill:rgb(66,146,198); stroke:rgb(66,146,198);}
.q6-9.stated { fill:rgb(33,113,181); stroke:rgb(33,113,181); }
.q7-9.stated { fill:rgb(8,81,156); stroke:rgb(8,81,156); }
.q8-9.stated { fill:rgb(8,48,107); stroke:rgb(8,48,107); }

.active {
    stroke: orange;
}

/* Tooltip Handling */
div.tooltip {
    /*Don't want any FOUC , so this applies to its default no "showing" class*/
    display:none;

    top:0px;
    left:0px;
    /*https://jira.us.kworld.kpmg.com/browse/NORCCMS-45*/
    right:0px;
    position: absolute;
    text-align: left;
    width: auto;
    background: white;


    /*This gets applied at HTML level */
    font-family: Arial, sans-serif;
    /*
    border-color: yellow;
    */
}



/*Used for emphasis text*/
tspan.em {
  font-weight:bolder;
}

svg .bold {
  font-weight:bolder;
}

/* When there's some view showing the tooltip is only good for its close/close-icon icon */
div.view-showing div.tooltip .info {
  display:none;
}

div.tooltip div.info p {
  margin: 0;
  margin-bottom: 0;
  line-height: 1.2;
}

div.tooltip .info {

    padding: 5px;
    /*Enough height to clear Northwestern states near the top of the map, else it's hard to hover them*/
    min-height: 80px;
    /*Enough width to allow the "(based on 1,000-4,999 beneficiaries)"*/
    min-width:400px;
    position:relative;
    margin: 2%;

}

div.tooltip .trend .year-panel.trend {
    width: 40%;
}

div.tooltip .trend .year-panel.trend:last-of-type {
  width:8%;
}

.wrap_in_ref {
  /*Example: "(based on 1,000-4,999 beneficiaries)"*/
  font-size:0.8em;
}
/*Good idea or not?*/
div.tooltip .trend .wrap_in_ref {
  display:none;
}

div.tooltip.pinned .hint  {
  display:none;
}

/*Removing position absolute*/
.hint {
    clear:both;
    color: grey;
    font-style: italic;
    font-size: 0.8em;
}

div.view-showing div.view.showing {
    display:block;
}

div.view {
    display:none;
    /* Important to override the parent-DIV size checking that c3 may do to get the correct width.*/
    position:absolute !important;
    width:100%;
    box-sizing : border-box;
    height: 100%;
    background-color: white;
    top:0px;
    box-shadow: grey 8px 8px 8px;

}


span.toggle-maximize:hover {
  cursor:pointer;
}

span.toggle-maximize {
    display:none;
    width: 20px;
    height: 20px;
    overflow: hidden;
    content: "X";
    display: block;
    position: absolute;
    right: 30px;
    top: 10px;
    background-size:100% 100%;
    opacity:0.8;
}

div#map-container.maximize-mode span.toggle-maximize {

  background-size:100% 100%;
  /*Must move further from the right so it still appears next to the pin, for now*/
  right:120px;
}

text.chart-caption {
  text-anchor:middle;
  font-size:0.9em;
}

div.tooltip .close-icon {
    position:absolute;
    border-radius:10px;
    color:white;
    /*background-color: rgb(33,113,181);*/
    top:10px;
    right:10px;
    display:none;
    font-family: sans-serif;
    text-align: center;
    font-size: 0.75em;
    line-height: 1.75em;
    height:20px;
    width:20px;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA4NJREFUeJzt20tqG0EURuEbexrhLcZgryIDD7KzgMGQPdkZKDc2str9qPuqqvNBT7sE/0EDiRIBgL0eReSU/SHw352IPEQd9ktE3kTkWYiggjsReZHzJk/eh+n4+hBBro/j6+MWweX4RJDr2vhuESyNTwQ5vhrfPIK18Ykg1pbxzSLYOj4RxNgzfnMEe8cnAl9Hxj8cwdHxicBHy/i7I2gdnwhsWYy/OQKr8YnAhuX4qxE8Gh9EBG08xtfn/tqBJzmPRQT5PMf/LSLflw4mgnxp4ysiyJM+viKCeGXGV0QQp9z4igj8lR1fEYGf8uMrIrDXzfiKCOx0N74ignbdjq+I4Ljux1dEsN8w4ysi2G648RURrBt2fEUEy4YfXxHBZ9OMr4jg3XTjKyKYeHw1cwTTj69mjIDxL8wUAeMvmCECxl8xcgSMv9GIETD+TiNFwPgHjRAB4zfqOQLGN9JjBIxvrKcIGN9JDxEwvrPKETB+kIoRMH6wShEwfpIKETB+sswIGL+IjAgYv5jICBi/qIgIGL84zwheROSP07sZ35BnBIzfiV4iYHxH1SNg/ABVI2D8QNUiYPwEVSJg/ETZETB+AVkRMH4h0REwfkFRETB+YSfx+13/Tc6BDTX+TfYHMHYjIreO778VkW+O70cDz3/1Lr8FKtxKxgdR4xNBQdHjE0EhWeMTQQHZ4xNBoirjE0GCauMTQaCq4xNBgOrjE4GjXsYnAgee4z87v5sIGkVc2qhwIRVXRN7YIYJiMq5rEUERmXf1iCBZhYuaRJCkwviKCIJVGl8RQZCK4ysicFZ5fEUETnoYXxGBsZ7GV0RgpMfxFRE06nl8RQQHjTC+IoKdRhpfEcFGI46viGDFyOMrIlgww/iKCC7MNL4ign9mHF9NH8HM46tpI2D8d9NFwPifTRMB4y8bPgLGXzdsBIy/3XARMP5+w0TA+Md1HwHjt+s2Asa3010EjG+vmwgY30/5CBjfX9kIGD9OuQgYP16ZCBg/T3oEjJ8vLQLGryMlggenAxn/GK8IXkXkx9KhT8aHMX4b6wheReTn2qFWETC+DasINo2vWiNgfFutEewaXx2NgPF9HI3g0PhqbwSM72tvBE3jq60RMH6MrRGYjK/WImD8WGsRmI6vliJg/BxLEbiMry4jYPxclxG4jq80AsavQSMIGV/dC+NXcpIvft4FgOv+AgbXp46K+BwUAAAAAElFTkSuQmCC');
    background-size:100% 100%;
    /*Compare to the maximize icon*/
    opacity:0.6;
    z-index: 2;
}


div.view svg .c3-grid line {
  stroke : #e9e9e9;
}

#trend_table tspan {
  font-size: .8em;
}

div.view g#trend_line_chart {
    height:200px;
    width:100%;

}


div#map-container.maximize-mode .view,
/*This hard-codes the width of the profile view regardless of maximize mode
Which is my attempt to anticipate and fix:
https://jira.us.kworld.kpmg.com/projects/NORCCMS/issues/NORCCMS-51?filter=allopenissues*/
div#map-container .view[data-link-class="profile"] {
  /*Rough printing dimensions*/
    width: 800px;
    height: auto;
    margin-bottom: 2em;
    padding-bottom: 1em;
}

/*Don't jump to full width while loading, the close "X" will shoot outside the map container*/
div#map-container.load-showing .tooltip,
div#map-container.map-load-showing .tooltip,
div#map-container.view-load-showing .tooltip,
 /*

 Just let it {
  width:100%;
}*/

/*Dont show the links while it's loading, they float there headlessly*/
div#map-container.load-showing footer,
div#map-container.map-load-showing footer,
div#map-container.view-load-showing footer,
/*If both view is showing and something is loading; still hide the view while load is happening*/
div.view-showing.load-showing div.view.showing ,
div.view-showing.map-load-showing div.view.showing ,
div.view-showing.view-load-showing div.view.showing  {
  display:none;
}
div#map-container.maximize-mode .tooltip {
    width: 800px;
}



/*https://jira.us.kworld.kpmg.com/projects/NORCCMS/issues/NORCCMS-43?filter=allopenissues*/
div.view-showing div.tooltip .links a{
    background-color: rgb(0, 89, 147);
    color: #b8b8b8;
    }

div.view-showing div.tooltip footer.links a.active {
    background-color: white;
    color: black;
    font-weight: bolder;
}

/* Both views */
div.view svg {

    width: 100%;
    /*IE doesn't respect the style height on the SVG whic his necessary for its block parent in county profile view */
}

div.tooltip {
      border-radius: 2px;
      border-width: 2px;
      border-style: solid;

      border-width: 0px 2px 2px 0px;
      border-color: rgb(8,48,107);
}

div.view-showing div.tooltip {
    width: 100%;
    /* Overriding the JS-calculated left applied at style-attribute level*/
    left: 0px !important;
    right: inherit;
    border: 0px;
    /* So there is no white if I move around the elements of the tooltip */
    background-color:transparent;
}

div.view[data-link-class="trend"] input[type="button"]{
  position:absolute;
  right:20px;
  bottom:20px;
}

div.view[data-link-class="profile"] input[type="button"]{
  /*
    There are two download buttons so  float  is required
    There is no SVG text to the left of the button, so  position:absolute is not required

    */

    float: right;
    margin-right: 20px;
}

div.view[data-link-class="profile"] .insufficient-data{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: black;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    font-size: 2em;
    margin-top: 15%;
    font-family: Arial;
    display:none;
}

div.view[data-link-class="profile"] .insufficient-data.showing{
  display:block;
}

/* Side-by-Side Selections/Map */
section#mmd-map-container {
    width: calc(100% - 20px);
    min-width: 1300px;
    height: 600px;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
}

div#menu-container {
    width: 20%;
    min-width: 200px;
    min-height: 700px;
    border: 0px solid #ADADAD;

    position:relative;
}

div#menu-container1{

  min-width: 200px;
  max-height: 250px;
  border: 2px ridge #ADADAD;
  left: 50px !important;
  bottom: 25 px;
  margin : 10px !important;
}

div#map-container {
    position: absolute;
    margin-left: 20%;
    height: auto;
    max-width: 960px;
    border-style: solid;
    border-color: #ADADAD;
    border-width: 1px;
}


table {
    border-spacing: 5px;
}

select {
   width: 100%;
   align:middle;
}

tr {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: small;
    border: 1px solid #000;
}

svg {
    overflow: hidden;
    display: block;
      font-family: Arial, sans-serif;
}

/*Using a label to prevent the button overflowing contaienrs on the left/pushing height bigger*/
#download-container label {
  display:inline-block;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  font-size:0.75em;
}

#download-container * {
  margin-right:2px;
}
/* Legend */
.legend-header {
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: bold;
    font-size:0.8em;
    display: block;
}

.legend text {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size:12px;
  /*  font-size: small;*/
}

#legend-container {
    position: absolute;

}

/* Urban Cover */
.urban {
    fill: url(#diagonalHatch);
    stroke-width: 0;
    opacity: 0.5;
}

/*
Thought these were masking/interfering with mouseenter events on .c3-shape
But in fact c3 author had pointer-events: none'd those .c3-shape s!
Via inline style!
Just had to undo that

.c3-event-rect,
.c3-zoom-rect,
*/
#urbanoverlay {
    pointer-events: none;
}

text.small-legend {
    font-size: x-small;
}

label {
    display: block;
}

.screenread {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    overflow: hidden;
}

/*In trend mode there are three .trend panels*/

div.tooltip .year-panel.trend {
    width:35%;
}

div.tooltip .year-panel.trend:last-child {
    width:18%;
}

#trend_table  {
  color:grey;
  fill:grey;
  /*Assumption that everything should be right-aligned because they're mostly numeric*/
    text-anchor: end;
}

#trend_table .left-align {
  /*Exception to above assumption; mainly for the label in column 1, so that it does not spill outside of the "margin" created by transform on the x-axis*/
  text-anchor:start;
}

#trend_table text.tooltipped  tspan{
  /*Nothing works but fill!?
  http://stackoverflow.com/q/15500894/1175496
  background-color:black;
  fill:white;
  color:white;
  font-size:30px;
  font-weight:bolder;*/
  fill: black;
  color:black;
  font-weight: bolder;
}

div.tooltip .year-panel {
    /* Float left for chronological order */
    float:left;
    margin:2%;
}


div.shade {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
    width: 100%;
    height: 100%;
    position: absolute;
    background: -moz-linear-gradient(160deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50%);
    background: -webkit-linear-gradient(160deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50%);
    background: linear-gradient(160deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50%);
    top:0px;
    left:0px;
}


.reference {
    display: none;
}
/* You can wrap anything as a reference if you want to be able to show it only on the last "year-panel' */
.year-panel:last-of-type .reference {
    display: inline;
}

.all-charts-tooltip {
    /* Style to display: block using d3 */
    display: none;
    /*https://bl.ocks.org/mbostock/1087001*/
    position: absolute;
    text-align: center;
    /* width: 60px; */
    /* height: 12px; */
    padding: 8px;
    /* Height might change; causing us to always adjust margin-top
    But left-aligned stuff never changes location; just move it to the right a bit */
    margin-left:40px;
    font: 1.5em sans-serif;
    background: rgba(255, 255, 255, 0.87);
    /* pointer-events: none; */
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.24);
}

.all-charts-tooltip.show {
  display:block;
}

.all-charts-tooltip .context {
  /* display:inline isn't sufficient? */
    float: left;
    font-size: 0.7em;
    padding: 0em 0.5em;
    display:none;
}

.all-charts-tooltip .context.show {
  display:block;
}

.all-charts-tooltip .context label {
  font-weight:bolder;
}

.all-charts-tooltip .context.secondary-axis-tip {
    border-left: 1px solid grey;
}

option.opt-header {
    background-color: #ADADAD;
    color: #000;
    font-weight: bold;
}

option.opt-header:disabled {
    background-color: #000;
    color: #FFF;
    font-weight: bold;
}

.first-col{
  max-width: 100px !important;
}

.population-report {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 10pt;
}

.tabs__container::after {
    clear: both;
    content: "";
    display: table;
}

.tabs__tabs {
    display: inline-block;
}

.tabs__tab {
    box-sizing: border-box;
    float: left;
    border: 1px solid #044C89;
    font-size: 18px;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
}

.tabs__tab a {
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0.8em 1em;
    margin-top: 3px;
    color: #044C89;
}

.tabs__tab .inner-active {
    margin-top: 0px;
    border-width: 3px 0 0 0;
    border-color: #044C89;
    border-style: solid;
    background-color: #ECECEC;
    font-weight: bold;
}

.tabs__border {
    border-top: 3px solid #044C89;
    width: 100%;
    margin-bottom: 0.5em;
    clear: both;
}

.header__container {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 1em 0 0 0;
}

.align_right {
  position: absolute;
  right: 2em;
}