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

body{
    margin:0px;
}

.mpp-interactive{
    margin:0px auto;
    background:#ffffff;
}

.mpp-interactive .aired-out{
    margin-top:4em;
    margin-bottom:1em;
}

.mpp-interactive .bottom-bar{
    padding-bottom:1em;
    position:relative;
}

.mpp-interactive .bottom-bar:before{
    content:"";
    position:absolute;
    bottom:-1em;
    right:0%;
    width:10%;
    height:5px;
    background-color:#D0D3D4;
}

.mpp-interactive p.monitor-title{
    font-size:3em;
    font-weight:700;
}

.mpp-interactive .inline-blocked{
    background:#000000;
    padding-right:50px;
    display:inline-block;
}

.mpp-interactive .c-fix:after{
    display:table;
    clear:both;
    content:"";
}

.mpp-interactive .pad-from-edge{
    padding:0px 25px 0px 25px;
    margin:0px auto;
}

.mpp-interactive .half-pad-from-edge{
    padding:0px 25px 0px 25px;
    margin:0px auto;    
}

.mpp-interactive .rm-this{
    display:none;
}

.mpp-interactive b{
    font-weight:bold;
    color:inherit;
}

.mpp-interactive i{
    font-style:italic;
    color:inherit;
}

.mpp-interactive a{
    font-style:none !important;
    color:inherit !important;
    font-weight:inherit !important;
    border-bottom:none !important;
    text-decoration:none !important;
}

.mpp-interactive p{
    font-size:16px;
    line-height:1.3em;
    margin:5px 0px;
    font-family: 'Roboto', sans-serif !important;
}
.mpp-interactive p.big-metro-name{
    font-size:32px;
    font-weight:bold;
}
.mpp-interactive div.section-marker{
    padding-top:25px;
    padding-bottom: 25px;
    min-width:320px;
    max-width:1200px;
    margin:0em 2em 2em 0em;
    position:relative;
    padding-left:43px;


    /*
        background-color: rgb(208,211,212);
    background: radial-gradient(farthest-corner at 25px 0px, rgba(208,211,212,1) 0%, rgba(208,211,212,0) 50%);
    */
    
}
.mpp-interactive div.section-marker p:first-child{
    font-weight:bold;
    text-transform:uppercase;
    font-size:20px;
}

.mpp-interactive div.section-marker:before{
    content:"";
    position:absolute;
    left:25px;
    top:35px;
    width:10px;
    height:25px;
    border-radius: 0px;
    border: 5px solid #111111;
    border-width:15px 0px 0px 0px;
}


.mpp-interactive .authors-and-dates{
    margin-top:1em;
}

.mpp-interactive .authors-and-dates p{
    text-decoration:none;
    border:none;
    font-weight:bold;
}

.mpp-interactive .text-content{
    max-width:880px;
}

.mpp-interactive .text-content p{
    line-height:1.7em;
    margin:0em 0em 2em 0em;
}

.mpp-interactive .metro-monitor-content{
    max-width:1600px;
    margin:0px auto 0em auto;
}

.mpp-interactive .title-box{
    border-bottom:5px solid #D0D3D4;
    margin-bottom:20px;
    padding-bottom:10px;
}

.mpp-interactive .legend-wrap{
    float:right;
    max-width:430px;
}

.mpp-interactive .legend-wrap img{
    max-width:430px;
    width:100%;
    height:auto;
}

.mpp-interactive .monitor-button{
    padding:3px 15px;
    color:#000000;
    background-color:#ffffff;
    font-family: 'Roboto', sans-serif !important;
    font-size:16px;
    line-height:1.4em;
    border:1px solid #dddddd;
    border-radius:15px;
    display:inline-block;
    margin:0px 5px 5px 0px;
    cursor:pointer;
    outline:none;
}

.mpp-interactive .monitor-button:disabled{
    opacity:0.3;
    pointer-events:none;
    cursor:default;
}

.mpp-interactive .monitor-button.is-selected{
    border:1px solid #ffffff;
    background-color:#000000;
    color:#ffffff;
}

.mpp-interactive .monitor-button.is-selected.deselectable{
    position:relative;
}
.mpp-interactive .monitor-button.is-selected.deselectable:before{
    content:"x";
    background-color:#F26D00;
    color:#000000;
    display:block;
    position:absolute;
    border:1px solid #F26D00;
    border-radius:7px;
    right:-2px;
    top:-6px;
    width:14px;
    height:14px;
    line-height:14px;
    font-size:10px;
    text-align:center;
    box-sizing: border-box;
    font-family:"Courier New", Courier, monospace;
}

.mpp-interactive .control-wrap > div{
    margin-left:30px;
}

.mpp-interactive .select-wrap,
.mpp-interactive .button-wrap{
    float:right;
}
.mpp-interactive select{
    font-family: 'Roboto', sans-serif !important;
    padding:3px 16px 3px 8px;
    margin:0px 0px 15px 0px;
    font-size:16px;
    line-height:1.4em;
    font-weight:normal;
    max-width:100%;
    background-color:#ffffff;
    color:#111111;
    border:3px solid #D0D3D4;
}
.mpp-interactive .dark-mode select{border-color:#ffffff;}

.mpp-interactive .dark-mode{
    background-color:#111111;
}
.mpp-interactive .dark-mode p{
    color:#ffffff;
}

.mpp-interactive p.subtle-header{

    border-top:3px solid #dc2a2a;
    padding: 10px 15px 5px 5px;
    display:inline-block;
}

.mpp-interactive div,
.mpp-interactive .box-sizing{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.mpp-interactive .flex-container{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items:flex-start;
    align-content:flex-start;
}

.mpp-interactive .monitor-header{
    background:#111111;
}

.mpp-interactive .monitor-header .metro-monitor-content{
    max-width:1940px !important;
}

.mpp-interactive .monitor-header > .flex-container{
    align-items: stretch;
}

.mpp-interactive .monitor-header > .flex-container > div{
    width:25%;
    padding:25px;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-header-title{
    background:#111111;
    width:40%;
    padding:25px 25px;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-header-title p{
    color: #ffffff !important;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box{
    width:15%;
    max-width:600px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content: center;
    padding:50px 25px;
    cursor:pointer;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box p{
    font-weight:bold;
    text-align:right;
    font-size:20px;
    user-select:none;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box.dark-box{
    display:block;
}
.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box.dark-box p{
    color:#ffffff;
    text-align:left;
    font-weight:normal;
    font-size:16px;
}
.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box.dark-box p:first-child{
    font-weight:bold;
    font-size:20px;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box a:after{
    content:"";
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box:hover a,
.mpp-interactive .additional-resources .flex-container > div:hover a{
    border-bottom:3px solid #ff5e1a !important;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box.blue-box:hover a{
    border-bottom:3px solid #a4c7f2 !important;
}

.mpp-interactive .monitor-header > .flex-container > div.monitor-link-box.orange-box:hover a{
    border-bottom:3px solid #ffa626 !important;
}

.mpp-interactive .orange-box{background-color:#ffa626 !important;}
.mpp-interactive .red-box{background-color:#ff5e1a !important;}
.mpp-interactive .blue-box{background-color:#a4c7f2 !important;}

.mpp-interactive .orange-box-border{border-top:10px solid #ffa626 !important;}
.mpp-interactive .red-box-border{border-top:10px solid #ff5e1a !important;}
.mpp-interactive .blue-box-border{border-top:10px solid #a4c7f2 !important;}


.mpp-interactive .additional-resources{
    padding-top:2em;
    padding-bottom:1em;
}

.mpp-interactive .additional-resources .flex-container{
    flex-direction:row;
}

.mpp-interactive .additional-resources .flex-container > div{
    flex-basis:250px;
    flex-grow:0;
    border-top:0px solid #000000;
    cursor:pointer;
    padding:10px 15px 10px 27px;
    margin-left:15px;
    position:relative;
}

.mpp-interactive .additional-resources .flex-container > div:before{
    content:"";
    position:absolute;
    left:10px;
    top:16px;
    width:10px;
    height:25px;
    border-radius: 0px;
    border: 5px solid #111111;
    border-width:15px 0px 0px 0px;
}

.mpp-interactive .additional-resources .flex-container > div p{
    font-style:italic;
}

.mpp-interactive .additional-resources .flex-container > div p b{
    font-style:normal !important;
}

.mpp-interactive .additional-resources .flex-container .content-type{
    font-size:0.75em;
    font-weight:bold;
    text-transform:uppercase;
}

.mpp-interactive .flex-container.text-with-sidebar > div.text-content{
    width:65%;
    padding-top:0px;
}
.mpp-interactive .flex-container.text-with-sidebar > div{
    width:35%;
    padding-top:0em;
}

.mpp-interactive .flex-container.map-layout{
    flex-direction:row;
    flex-wrap:nowrap;
}

.mpp-interactive .flex-container.map-layout > div{
    width:75%;
    width:calc(100% - 440px);
}

.mpp-interactive .flex-container.map-layout > div.map-controls{
    min-width:440px;
    width:25%;
    /*padding-left:0px;*/
}

.mpp-interactive .flex-container.map-layout > div.map-controls > div{
    margin-bottom:25px;
}

.mpp-interactive .flex-container.three-columns{
    flex-direction:row;
    flex-wrap:nowrap;
}

.mpp-interactive .flex-container.three-columns > div{
    width:33.3%;
    padding:10px 25px 40px 25px;
}

.mpp-interactive .flex-container.dash-panel-row{
    flex-wrap:nowrap;
    padding:10px 0px 5px 0px;
}

.mpp-interactive .flex-container.dash-panel-row.category-row{
    border-bottom:3px solid #D0D3D4;
    padding-bottom:15px;
    padding-right:25px;
    margin-bottom:15px;
}

.mpp-interactive .flex-container.dash-panel-row.category-row p{
    font-weight:bold;
    font-size:1.2em;
    margin:10px 0px 0px 0px;
}
.mpp-interactive .flex-container.dash-panel-row.category-row > div.rank-box p{
    font-size:1em;
    margin:0px;
}

.mpp-interactive .flex-container.dash-panel-row > div.rank-box > div{
    width:44px;
    height:44px;
    margin-right:10px;
    flex-shrink:0;
    flex-grow:0;
    border-radius:22px;
    border:2px solid #ffffff;
}

.mpp-interactive .flex-container.dash-panel-row p{
    user-select:none;
}

.mpp-interactive .flex-container.dash-panel-row > div.rank-box p{
    text-align:center;
    line-height:40px;
    margin:0px;

}

.mpp-interactive .flex-container.dash-panel-row p.dashboard-value{
    font-weight:normal;
    font-size:1.2em;
    margin:5px 0px;
    display:inline-block;
}


.mpp-interactive .flex-container.dash-panel-row p.dashboard-value:after{
    content:"Chart";
    background-color:#ffffff;
    background-image: url('https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2021/metro-monitor/assets/chart_button_icon.png');
    background-position:40px 40%;
    background-size:20px auto;
    background-repeat:no-repeat;
    line-height:1.1em;
    width:70px;
    color:#000000;
    text-decoration:none;
    padding:0px 5px;
    display:inline-block;
    margin-left:5px;
    margin-bottom:0px;
    cursor:pointer;
    user-select:none;
    font-size:13px;
    font-weight:normal;
    font-style:italic;
    vertical-align:baseline;
}

.mpp-interactive .vg-chart{
    background:#ffffff;
    border:1px dotted #000000;
    border-width:0px 0px 0px 1px;
    border-radius:0px;
    height:0px;
    padding:0px 0px;
    margin:0px 0px;
    transition: height 700ms, padding 700ms, margin 700ms;
    overflow:hidden;
    visibility:hidden;
    margin:0px 0px 0px 20px;
}

.mpp-interactive .vg-chart.chart-visible{
    padding:0px 0px;
    margin:0px 0px 15px 20px;
    visibility:visible;
    height:240px;
}

.mpp-interactive .highlighted-row p{
    font-weight:bold;
}

.mpp-interactive .role-legend path{
    shape-rendering:crispEdges;
}

.mpp-interactive .v-tooltip p{
    margin:0px 0px 10px 0px;
    font-size:15px;
    color:#101010;
}
.mpp-interactive .v-tooltip{
    pointer-events:none;
    background-color:rgba(255,255,255,0.9);
    padding:10px;
    border:1px solid #aaaaaa;
    box-shadow:3px 3px 6px rgba(0,0,0,0.2);
}

.mpp-interactive #more-info-box{
    left:50%;
    top:100px;
    transform:translateX(-50%);
    width:90%;
    height:90%;
    height:calc(100% - 125px);
    max-width:1100px;
    overflow:auto;
    position:fixed;
    border:1px solid #aaaaaa;
    box-shadow:0px 0px 35px rgba(0,0,0,0.75);
    padding:0px 25px 250px 25px;
    background-color:#ffffff;
    display:none;
}

.mpp-interactive #more-info-box > div:first-child > p:first-child{
    margin:5px 0px 25px 0px;
    font-size:1.75em;
}

.mpp-interactive .more-info-close{
    width:30px;
    height:30px;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDEzLjIyOTE2NyAxMy4yMjkxNjciCiAgIGhlaWdodD0iNTAiCiAgIHdpZHRoPSI1MCI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0yODMuNzcwODIpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoODIzIgogICAgICAgZD0iTSAwLjY2MTQ1Nzk4LDI4NC40MzIyOCAxMi41Njc3MDksMjk2LjMzODUzIgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41MjkxNjY2NztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW9wYWNpdHk6MTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDgyNSIKICAgICAgIGQ9Ik0gMTIuNTY3NzA5LDI4NC40MzIyOCAwLjY2MTQ1Nzk4LDI5Ni4zMzg1MyIKICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTI5MTY2Njc7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmUiIC8+CiAgPC9nPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-size:100%;
    position:absolute;
    top:20px;
    right:0px;
    cursor:pointer;
}


.mpp-interactive .more-info-button{
    position:absolute;
    width:20px;
    height:20px;
    padding:0px 0px;
    background-color:#dddddd;
    border-radius:9px;
    margin:0px;
    top:22px;
    right:5px
}

.mpp-interactive .more-info-button p{
    text-align:center;
    user-select:none;
    line-height:22px;
    font-weight:bold;
    font-size:16px;
    color:#777777;
    margin:0px;
}

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

    .mpp-interactive .select-wrap,
    .mpp-interactive .button-wrap{
        float:left;
    }

    .mpp-interactive .flex-container.three-columns{
        flex-direction:column;
    }

    .mpp-interactive .flex-container.three-columns > div{
        width:100%;
        padding:10px 25px 40px 25px;
    }

    .mpp-interactive .flex-container.text-with-sidebar{
        flex-direction:column;
    }

    .mpp-interactive .flex-container.text-with-sidebar > div.text-content{
        width:100%;
    }
    .mpp-interactive .flex-container.text-with-sidebar > div{
        width:100%;
    }

    .mpp-interactive .flex-container.map-layout{
        flex-direction:column;
    }
    
    .mpp-interactive .flex-container.map-layout > div{
        width:100%;
        order:1;
    }
    
    .mpp-interactive .flex-container.map-layout > div.map-controls{
        width:100%;
        order:2;
    }


    .mpp-interactive .monitor-header > .flex-container{
        flex-wrap:wrap;
        flex-direction: row;
    }

    .mpp-interactive .monitor-header > .flex-container > div{
        width:33.3% !important;
    }

    .mpp-interactive .monitor-header > .flex-container > div.dark-box{
        width:100% !important;
    }

    .mpp-interactive .monitor-header > .flex-container > div.monitor-header-title{
        width:100% !important;
    }

}

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

    .mpp-interactive .select-wrap,
    .mpp-interactive .button-wrap{
        float:right;
    }

    .mpp-interactive div.section-marker{
        float:left;
        width:40%;
    }

    .mpp-interactive .flex-container.three-columns{
        flex-direction:row;
    }

    .mpp-interactive .flex-container.three-columns > div{
        width:33.3%;
        padding:10px 25px 40px 25px;
    }

    .mpp-interactive .flex-container.text-with-sidebar > div.text-content{
        width:65%;
        margin-left:0%;
    }
    .mpp-interactive .flex-container.text-with-sidebar > div{
        width:27%;
        margin-left:8%;
    }

    .mpp-interactive .flex-container.text-with-sidebar{
        flex-direction:row;
    }


    .mpp-interactive .flex-container.map-layout{
        flex-direction:row;
    }
    
    .mpp-interactive .flex-container.map-layout > div{
        width:75%;
        width:calc(100% - 440px);
        order:1;
    }
    
    .mpp-interactive .flex-container.map-layout > div.map-controls{
        width:25%;
        padding-left:0px;
        order:2;
    }
}

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

    .mpp-interactive .monitor-header > .flex-container > div.monitor-link-box p{
        margin-left:15px;
    }
    .mpp-interactive .monitor-header > .flex-container > div.monitor-link-box.dark-box p{
        margin-left:0px;
    }

    .mpp-interactive .monitor-header > .flex-container{
        flex-direction: row;
    }

    .mpp-interactive .monitor-header > .flex-container > div{
        width:20% !important;
    }

    .mpp-interactive .monitor-header > .flex-container > div.dark-box{
        width:100% !important;
    }

    .mpp-interactive .monitor-header > .flex-container > div.monitor-header-title{
        width:40% !important;
    }

    .mpp-interactive .map-icon,
    .mpp-interactive .dash-icon,
    .mpp-interactive .trend-icon{
        background-image:url('https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2021/metro-monitor/assets/icons/map.png');
        background-repeat:no-repeat;
        background-size:100%;
        background-position: 50% 50%;
    }

    .mpp-interactive .dash-icon{
        background-image:url('https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2021/metro-monitor/assets/icons/dash.png');
    }

    .mpp-interactive .trend-icon{
        background-image:url('https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2021/metro-monitor/assets/icons/trends.png');
    }

}