@import url("https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css");

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,400&display=swap');


.metro-interactive > .is-text{
    padding:25px;
}
.metro-interactive .table-of-contents p:first-child{
    font-size:1.25em;
    margin-bottom:20px;
}
.metro-interactive .table-of-contents p{
    margin:5px 0px;
    font-weight:bold;
}
.metro-interactive .table-of-contents p a:after{
    content:" »";
    transform:translateX(3px);
    display:inline-block;
    transition: transform 0.5s;
}
.metro-interactive .table-of-contents p a:hover:after{
    transform:translateX(7px);
}

.metro-interactive b{
    font-weight:bold;
}

.is-text p, .is-text li{
    line-height:1.6em;
    margin:0em 0em 2em 0em;
}

.metro-interactive{
    position:relative;
    max-width:1300px;
    margin:0rem auto !important;
    padding:0px 15px 0px 15px;
}

.metro-interactive .mapboxgl-popup-content{
    padding: 10px 10px 15px;
}

.metro-interactive .center-column{
    margin:0em auto;
    width:100%;
    max-width:900px;
}

.metro-interactive .zoom-to-show-ac{
    margin:15px 0px 0px 0px;
}

.metro-interactive .zoom-to-show-ac:before{
    margin:0px 5px 0px 0px;
    content:"";
    width:40px;
    height:20px;
    display:inline-block;
    position:relative;
    transform:translateY(15px);
    border-top:2px solid #00dfe3;
}
.metro-interactive .zoom-to-show-ac:after{
    margin:0px;
    position:relative;
    font-size:15px;
    content:"Zoom in to view activity centers";
    font-weight:bold;
    display:inline-block;
}
.metro-interactive .zoom-to-show-ac.ac-visible:after{
    content:"Activity centers"
}

.metro-interactive p, .metro-interactive h2, .metro-interactive h3,
.metro-interactive li, .metro-interactive *:before, .metro-interactive *:after, 
.metro-interactive select{
    font-family:'Roboto', sans-serif;
    color:#111111;
}
.metro-interactive text{
    font-family:'Roboto', sans-serif;
    fill:#111111;
}
.metro-interactive select{
    padding:5px;
    margin:0px;
    font-size:16px;
    width:100%;
    line-height:1.3em;
    background-image:none;
}

.metro-interactive ol{
    padding-left:18px;
    list-style-type:decimal;
}

.metro-interactive ol li{
    margin-bottom:2rem;
}

.metro-interactive ol li > *{
    display:block;
    margin-bottom:10px;
}

.metro-interactive sup{
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin:0px 2px 0px 1px;
    font-size:14px;
    line-height:0em;
    color:#00649F;
    font-weight:bold;
}
.metro-interactive .notes-container sup{
    color:initial;
}

.metro-interactive h2{
    font-size:2.25em;
    font-weight:bold;
    margin: 2em 0em 0.8em 0em;
    line-height:1.3em;
}

.metro-interactive h2.big-separation{
    padding-top:1em;
    margin-top:2em;
    border-top:1px solid #333333;
}

.metro-interactive h3{
    font-size:1.25em;
    font-weight:bold;
    margin: 1em 0em 1em 0em;
}

.metro-interactive p{
    line-height:1.6em;
}

.metro-interactive #metro-area-dashboard p.metro-area-name{
    font-size:1.6em;
    font-weight:bold;
    margin:0px 0px 15px 0px;
}
.metro-interactive #metro-area-dashboard p{
    line-height:1.3em;
    font-size:15px;
}

.metro-interactive a{
    color:#00649F;
    font-weight:bold;
    border:none !important;
    border-width:0px !important;
    text-decoration:none !important;
}
.metro-interactive a:hover{
    color:#004B6E;
}

.metro-interactive #map-control{
    padding:5px 10px;
}

.metro-interactive .notes-container{
    padding-top:2em;
}

.metro-interactive .notes-container > div{
    width:100%;
    max-width:900px;
    margin:1em auto;
    border-top:1px solid #333333;
    padding:15px;
}

.metro-interactive .notes-container > div > p:first-child{
    font-weight:bold;
}

.metro-interactive .notes-container > div > p{
    margin-bottom:1em;
}

.metro-interactive a{
    font-family: inherit;
}

.rm-this{
    display:none;
}

.metro-interactive .mapbox-container{
    min-height:50vh;
    height:80vh;
    width:100%;
}

.metro-interactive .mapbox-legend p,
.metro-interactive .flex-container p{
    margin:0px;
    line-height:1.3em;
}

.mapboxgl-popup, .mapboxgl-popup *{
    pointer-events: none !important;
}

.metro-interactive .mapbox-legend > #map-legend > p{
    font-weight:bold;
    font-size:13px;
    margin:25px 0px 8px 0px;
}
.metro-interactive .mapbox-legend > #map-legend > p:first-child{
    margin-top:10px;
    font-size:15px;
}


.metro-interactive .mapbox-legend,
.metro-interactive .mapbox-overlay{
    position:absolute;
    top:15px;
    top:0px;
    left:20px;
    left:0px;
    z-index:10;
    background-color:#ffffff;
    padding:5px 15px 10px 15px;
    border-radius:3px;
    border-radius:0px;
    /*box-shadow: 0px 0px 15px -5px #000000;*/
    box-sizing: border-box;
}

.metro-interactive .mapbox-overlay{
    left:unset;
    right:0px;
    top:0px;
    border-radius:0px;
    max-width: 450px;
}

.metro-interactive .mapbox-overlay p:first-child{
    font-weight:bold;
    font-size:18px;
    text-transform: none;
}
.metro-interactive .mapbox-overlay p{
    font-size:13px;
    text-transform:uppercase;
    line-height:1.3em;
    margin:10px 0px;
}
.metro-interactive .mapbox-overlay p b{
    font-weight:900;
}
.metro-interactive .mapbox-overlay p.summary-stat:last-child{
    font-weight:bold;
}

.metro-interactive .control-flex{
    position:sticky;
    top:0px;
    left:0px;
    display:flex;
    justify-content: center;
    align-items:flex-end;
    column-gap: 10px;
    padding:10px 20px 5px 20px;
    margin-bottom:15px;
    border:1px solid #dddddd;
    border-width:0px 0px 1px 0px;
    z-index:20;
    background-color:#ffffff;
}
.metro-interactive .control-flex p{
    margin:2px 0px 0px 0px;
    line-height:1.3em;
    font-size:16px;
    font-style:italic;

}
.metro-interactive .control-flex > div:first-child{
    flex-grow:0;
}
.metro-interactive .control-flex > div{
    min-width:80px;
}

.metro-interactive .flex-container{
    display:flex;
    justify-content: flex-start;
    align-items:flex-end;
    width:100%;
    column-gap: 25px;
    padding:15px 0px;
}

.metro-interactive .flex-container > div{
    flex-basis:20%;
    flex-grow:1;
    flex-shrink:1;
    max-width:500px;
    position:relative;
    overflow:hidden;
    padding:0px 15px 0px 0px;
}

.metro-interactive div.add-benefits-icons.flex-container{
    align-items: flex-start;
    margin-top:10px;
}

.metro-interactive div.add-benefits-icons > div:before{
    content:"";
    display:none;
    width:42px;
    height:42px;
    margin:0px 5px 5px 5px;
    float:left;
}

.metro-interactive div.add-benefits-icons > div:first-child:before{
    background-image: url("https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2023/building-for-proximity/assets/BANK.png");
}

.metro-interactive div.add-benefits-icons > div:last-child:before{
    background-image: url("https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2023/building-for-proximity/assets/C02.png");
}

.metro-interactive div.is-relative{
    position:relative;
}

.metro-interactive div.overlay{
    z-index:10;
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    min-height:100%;
    border:1px solid #333333;
    background-color:rgba(0,0,0,0.05);
    display:none;
}

.metro-interactive div.overlay.is-visible{
    display:block;
}

.metro-interactive div.overlay.is-visible + div{
    filter:blur(1px);
    transition-property: filter;
    transition-duration: 4s;
    transition-delay: 0s;
}

.metro-interactive .overlay-text span{
    padding:10px 15px;
    background-color: #3EB2C6;
    color:#000000;
    display:inline-block;
    margin: 1em 0em 0em 0em;
    font-size:1.25rem;
    color:#222222;
}


@media screen and (min-width:0px) {

    .metro-interactive .two-panel-flex{
        display:flex;
        justify-content:space-between;
        align-items: center;
        flex-direction: column;
        row-gap:25px;
        
    }
    .metro-interactive .two-panel-flex > div{
        width:75%;
    }
    
    .metro-interactive .mapbox-container{
        height:80vh;
    }

    .metro-interactive .mapbox-legend{
        width:25%;
        min-width:200px;
    }

    .metro-interactive .swatches{
        display:flex;
        flex-direction: column;
    }
    .metro-interactive .swatches > div{
        width:40px;
        height:20px;
        position:relative;
    }

    .metro-interactive .swatches > div.swatch-is-na{
        margin:5px 0px 0px 0px;
    }

    .metro-interactive .swatches > div > p{
        font-size:13px;
        text-align:left;
        position:absolute;
        line-height:16px;
        top:unset;
        left:100%;
        right:unset;
        padding:0px 0px 0px 5px;
        bottom:0px;
        transform:translateY(50%);
    }

    .metro-interactive .swatches > div.swatch-is-na > p{
        transform:unset;
    }

    .metro-interactive .swatches > div:after{
        content:"";
        display:block;
        position:absolute;
        right:0px;
        bottom:0px;
        height:calc(100% + 5px);
        width:100%;
        border:1px solid #333333;
        border-width:0px 0px 1px 0px;    
    }
    
    .metro-interactive .swatches > div:last-child:after,
    .metro-interactive .swatches > div.swatch-is-na:after{
        display:none;
    }
    .metro-interactive .swatches > div.swatch-is-na{
        margin:5px 0px 0px 0px;
    }
    .metro-interactive .swatches > div:has(+ .swatch-is-na):after{
        display:none;
    }

    .metro-interactive .control-flex{
        flex-direction: column;
        align-items: flex-start;
    }

}

@media screen and (min-width:800px) {

    .metro-interactive .mapbox-container{
        height:80vh;
    }

    .metro-interactive .mapbox-legend{
        width:auto;
    }

    .metro-interactive .swatches{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items:flex-start;
        width:500px;
        padding-top:25px;
    }
    .metro-interactive .swatches > div{
        flex-basis:10%;
        flex-grow:1;
        flex-shrink:1;
        width:auto;
        height:15px;
        position:relative;
    }
    
    .metro-interactive .swatches > div:after{
        content:"";
        display:block;
        position:absolute;
        right:0px;
        bottom:0px;
        height:calc(100% + 5px);
        width:10px;
        border:1px solid #333333;
        border-width:0px 1px 0px 0px;    
    }
    
    .metro-interactive .swatches > div:last-child:after,
    .metro-interactive .swatches > div.swatch-is-na:after{
        display:none;
    }
    .metro-interactive .swatches > div.swatch-is-na{
        margin:0px 0px 0px 5px;
    }
    .metro-interactive .swatches > div:has(+ .swatch-is-na):after{
        display:none;
    }
    
    .metro-interactive .swatches > div > p{
        font-size:13px;
        text-align:center;
        position:absolute;
        line-height:16px;
        top:-20px;
        bottom:unset;
        right:1px;
        left:unset;
        transform:translateX(50%);
        padding:0px 0px 0px 0px;
    }
    .metro-interactive .swatches > div.swatch-is-na > p{
        right:50%;
        transform:translateX(50%);
    }

    .metro-interactive .control-flex{
        flex-direction: row;
        align-items: center;
    }
}

@media screen and (min-width:950px) {

    .metro-interactive .two-panel-flex{
        display:flex;
        justify-content:space-between;
        align-items: flex-start;
        flex-direction: row;
    }
    .metro-interactive .two-panel-flex > div{
        width:35%;
    }
    
    .metro-interactive .two-panel-flex > div:first-child{
        width:65%;
    }
}

@media screen and (min-width:1200px) {
    .metro-interactive div.add-benefits-icons > div:before{
        display:block;
    }
}