#controls {
    margin-bottom: 5px;
}

select{
    margin-right: 3px;
    float: right;
    background-color: white;
    border: 1px solid lightgray;;
    color: #555;
}

.sourceline{
    margin-top: 4px;
}

.rankdot {
    cursor: pointer
}

.rankdot circle {
    fill: lightgray;
    stroke: white;
    stroke-width: 1;
    fill-opacity: 0.8;
}

.rankdot text {
    /* font-family: monaco, Consolas, "Lucida Console", monospace; */
    /* font-size: 10px; */
    opacity: 0;
}

.rankdot:hover text {
    opacity: 1;
}


.gaps:hover .rankdot[data-state='Connecticut'] text {
    opacity: 0;
}

.gaps:hover .rankdot[data-state='Connecticut']:hover text, 
.rankdot[data-state='Connecticut'] text{
    opacity: 1;
}

.rankdot:hover circle {
    fill: gold;
    stroke: gold;
    fill-opacity: 1;
}

.rankdot[data-state='Connecticut'] circle{
    fill: tomato;
}

.rankdot[data-state='Connecticut']:hover circle{
    stroke: tomato;
}

.rankdot[data-state='National'] circle {
    fill: skyblue;
}

.rankdot[data-state='National']:hover circle {
    stroke: skyblue;
}

.d3axis {
    opacity: 0.5;
}

svg {
    margin-top: 14px;
}

.detail-label {
    /* font-size: 10px; */
}