html, body {
    width: 100%;
    height: 100vh;
    margin-bottom: 0;
    /*display: -ms-flexbox;*/
    /*display: flex;*/
    color: #333;
    /*text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);*/
    /*box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);*/
}

.nav-item {
    padding: 10px;
    color: #fff;
    text-anchor: middle;
}
.states :hover {
    opacity: 0.5;
}

.states {
    stroke: #000;
    stroke-width: 0.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    cursor: pointer;
}
.state-borders {
    fill: none;
    stroke: #000;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.crash-dot {
    fill: #353535;
    pointer-events: none;
}

@media screen and (min-width: 1024px){
    #smap {
        width: 47%;
        float: left;
        margin-left: 2%;
    }
    #tmap {
        width: 47%;
        float: right;
        margin-right: 2%;
        margin-left: 1%;
    }
    #parsets {
        width: 47%;
        float: left;
        margin-right: 2%;
        margin-left: 1%;
    }
    #about {
        width: 47%;
        float: right;
        margin-left: 2%;
    }

}


.background {
    fill: #eee;
    pointer-events: all;
}

.d3-tip {
    /*line-height: 5;*/
    padding-left: 10px;
    padding-right: 10px;
    min-width: 400px;
    border-style: groove;
    /*padding: 12px;*/
    background: #FFFFFF;
    color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    pointer-events: none;
}
.tooltip-title{
    font-size:18px;
    font-family: "Arial Black";

}

.tooltipDiv {
    content: "\25BC";
    border: 2px solid white;
    border-radius: 4px;
}

.tooltip {
    opacity: 1 !important;
}

.axis text {
    font: 10px sans-serif;
}

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

.outline {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
}

.feature {
    fill: #ccc;
}

.mesh {
    fill: none;
    stroke: #fff;
    stroke-width: .5px;
    stroke-linejoin: round;
}

.rect {
    fill: cadetblue;
    opacity: 0.3;
    stroke: white;
}
/*path {*/
    /*fill: #ccc;*/
    /*stroke: #fff;*/
    /*stroke-width: .5px;*/
/*}*/
.county:hover{
    fill:orange;
}

/* Potentially move these to d3.parsets.css file */
.dimension { cursor: ns-resize; }
.category { cursor: ew-resize; }
.dimension tspan.name { font-size: 1.5em; fill: #333; font-weight: bold; }
.dimension tspan.sort { fill: #000; cursor: pointer; opacity: 0; }
.dimension tspan.sort:hover { fill: #333; }
.dimension:hover tspan.name { fill: #000; }
.dimension:hover tspan.sort { opacity: 1; }
.dimension line { stroke: #000; }
.dimension rect { stroke: none; fill-opacity: 0; }
.dimension > rect, .category-background { fill: #fff; }
.dimension > rect { display: none; }
.category:hover rect { fill-opacity: .3; }
.dimension:hover > rect { fill-opacity: .3; }
.ribbon path { stroke-opacity: 0; fill-opacity: .5; }
.ribbon path.active { fill-opacity: .9; }
.ribbon-mouse path { fill-opacity: 0; }

.category-0 { fill: #1f77b4; stroke: #1f77b4; }
.category-1 { fill: #ff7f0e; stroke: #ff7f0e; }
.category-2 { fill: #2ca02c; stroke: #2ca02c; }
.category-3 { fill: #d62728; stroke: #d62728; }
.category-4 { fill: #9467bd; stroke: #9467bd; }
.category-5 { fill: #8c564b; stroke: #8c564b; }
.category-6 { fill: #e377c2; stroke: #e377c2; }
.category-7 { fill: #7f7f7f; stroke: #7f7f7f; }
.category-8 { fill: #bcbd22; stroke: #bcbd22; }
.category-9 { fill: #17becf; stroke: #17becf; }

.tooltip {
  background-color: rgba(242, 242, 242, .6);
  position: absolute;
  padding: 5px;
}
#about {
    margin-bottom: 10%;
}
.footer {
    position: fixed;
    bottom: 0;
    margin-top: 10%;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    line-height: 60px;
    font-size: 24px;
}