/*Borough-zoom D3 Visualization*/
.district-names {
        fill: grey;
        text-anchor: middle;
    }
.background {
    fill: none;
    pointer-events: all;
}

#neighborhood {
    fill: #aaa;
}

#neighborhood .active {
    fill: orange;
}

#borders {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}
div.tooltip { 
    position: absolute;     
    text-align: center;     
    width: auto;          
    height: auto;         
    padding: 2px;       
    font: 12px sans-serif;    
    background: lightsteelblue; 
    border: 0px;    
    border-radius: 8px;     
    pointer-events: none;     
}
/*KNN D3 Visualization*/
.currentFlag {
    background-color: #595959 !important;
    color: white;
  }
  .fancy_btn {
    display: inline-block;
    margin: 20px;
    
    -webkit-border-radius: 10px;
    
    -webkit-box-shadow: 
    0px 3px rgba(128,128,128,1), /* gradient effects */
    0px 4px rgba(118,118,118,1),
    0px 5px rgba(108,108,108,1),
    0px 6px rgba(98,98,98,1),
    0px 7px rgba(88,88,88,1),
    0px 8px rgba(78,78,78,1),
    0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.fancy_btn span {
    background-color: #E8E8E8;
    
    background-image: 
    /* gloss gradient */
    -webkit-gradient(
        linear, 
        left bottom, 
        left top, 
        color-stop(50%,rgba(255,255,255,0)), 
        color-stop(50%,rgba(255,255,255,0.3)), 
        color-stop(100%,rgba(255,255,255,0.2))),

    /* dark outside gradient */
    -webkit-gradient(
        linear, 
        left top, 
        right top, 
        color-stop(0%,rgba(210,210,210,0.3)), 
        color-stop(20%,rgba(210,210,210,0)), 
        color-stop(80%,rgba(210,210,210,0)), 
        color-stop(100%,rgba(210,210,210,0.3))),

    /* light inner gradient */
    -webkit-gradient(
        linear, 
        left top, 
        right top, 
        color-stop(0%,rgba(255,255,255,0)), 
        color-stop(20%,rgba(255,255,255,0.5)), 
        color-stop(80%,rgba(255,255,255,0.5)), 
        color-stop(100%,rgba(255,255,255,0))),        

    /* diagonal line pattern */
    -webkit-gradient(
        linear, 
        0% 100%, 
        100% 0%, 
        color-stop(0%,rgba(255,255,255,0)), 
        color-stop(40%,rgba(255,255,255,0)), 
        color-stop(40%,#D2D2D1), 
        color-stop(60%,#D2D2D1), 
        color-stop(60%,rgba(255,255,255,0)), 
        color-stop(100%,rgba(255,255,255,0)));
    
    -webkit-box-shadow:
    0px -1px #fff, /* top highlight */
    0px 1px 1px #FFFFFF; /* bottom edge */
    
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;
    
    display: inline-block;
    padding: 10px 40px 10px 40px;
    
    color: #3A474D;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    
    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

.fancy_btn span:hover {
    color: #AEBF3B;
    text-shadow: 0px -1px #97A63A;
    cursor: pointer;
}

.fancy_btn:active {
    -webkit-box-shadow: 
    0px 3px rgba(128,128,128,1),
    0px 4px rgba(118,118,118,1),
    0px 5px rgba(108,108,108,1),
    0px 6px rgba(98,98,98,1),
    0px 7px rgba(88,88,88,1),
    0px 8px rgba(78,78,78,1),
    0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}

.fancy_btn:active span{
    -webkit-transform: translate(0, 5px); /* depth of fancy_btn press */
}