.c-fix:after, 
.clearfix:after, 
.grid-container:after,
.map-panel:after,
.metro-monitor-dash:after{
    display:table;
    content:"";
    clear:both;
}

.metro-interactive .metro-monitor-dash{
    margin:0px auto;
}

.metro-interactive .reading-column{
    margin:5rem auto;
    max-width:750px;
}

.metro-interactive .reading-column p{
    line-height:1.7em;
    margin:0px 0px 1em 0px;
}

.metro-interactive .reading-column p:first-child{
    font-weight:bold;
}

.metro-interactive .mi-toc-links{
    padding:15px 15px 5px 15px;
    background-color:#dddddd;
    height:100%;
  }
  
  .metro-interactive .mi-toc-links > p{
    margin-bottom:15px;
  }
  .metro-interactive .mi-toc-links > p:first-child{
    margin:0px 0px 15px 0px;
    font-weight:bold;
    border-bottom:2px solid #ffffff;
    padding-bottom:4px;
  }
  
  .metro-interactive .mi-toc-links a,
  .metro-interactive #dash-download{
    text-decoration:none;
    color:#101010;
    border:none;
    border-bottom-width:0px;
    padding:0px;
    margin:0px;
    display:inline;
  }

/*text, headers, titles */
.metro-interactive .map-panel .map-title{
    text-align:center;
    font-weight:bold;
    font-size:1.25rem;
    line-height:1.25em;
    margin:0px 0px 5px 0px;
}

.metro-interactive .map-panel .map-multiple .map-title{
    font-size:13px;
    font-weight:normal;
    margin:0px 0px 10px 0px;
}

.metro-interactive .category-headline p:last-child{
    font-style:italic;
}

.metro-interactive .category-headline > p:first-child{
    font-size:1.75rem;
    font-weight:bold;
    line-height:1.4em;
    font-style:normal;
}

.metro-interactive .category-headline{
    max-width:1800px;
    margin:0px auto;
    padding:15px 15px 15px 15%;
}

.metro-interactive .category-headline > *{
    min-width:320px;
    max-width:1000px;
}

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

.metro-interactive .rm-text{
    display:none !important;
}
/* */

.metro-interactive{
    padding:0px 15px;
}

.metro-interactive *{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
}

.metro-interactive svg{
    overflow:visible;
}

.metro-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:35px 25px;
    background-color:#ffffff;
    display:none;
}

.metro-interactive #more-info-box > div:first-child{
    max-width:1050px;
    margin:15px auto;
    position:relative;
    z-index:10000;

}

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

.metro-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:20px;
    cursor:pointer;
}


.metro-interactive .more-info-button{
    position:relative;
    display:inline-block;
    width:21px;
    height:21px;
    padding:3px 0px;
    background-color:#dddddd;
    border-radius:5px;
    margin:0px 0px 0px 10px;
    bottom:3px;
    vertical-align:baseline;
}
.metro-interactive .more-info-button{
    text-align:center;
    user-select:none;
    line-height:15px;
    font-size:15px;
    color:#777777;
}

.metro-interactive .grid-container{
    display: block;
    grid-template-columns: 50% 50%;
    grid-auto-flow:row;
    width:100%;
    margin:0px auto 0px auto;
}

.metro-interactive .grid-container > div{
    padding:0px 24px 0px 0px;
    float:left;
    width:50%;
}

/*if grid and grid-template columns not supported, use floats (default)*/
@supports (display:grid) and (grid-template-columns: 50% 50%){
    .metro-interactive .grid-container > div{
        width:auto !important;
    }

    .metro-interactive .grid-container{
        display:grid !important;
    }
}

.metro-interactive .grid-container.three-column-grid{grid-template-columns: 33% 33% 33%;}
.metro-interactive .grid-container.three-column-grid > div{width:33%;}

.metro-interactive .grid-container.four-column-grid{grid-template-columns: 25% 25% 25% 25%;}
.metro-interactive .grid-container.four-column-grid > div{width:25%;}

.metro-interactive .grid-container.five-column-grid{grid-template-columns: 20% 20% 20% 20% 20%;}
.metro-interactive .grid-container.five-column-grid > div{width:20%;}

.metro-interactive .grid-container.text-aside{grid-template-columns: 150px 1fr 400px; max-width:1600px;}
.metro-interactive .grid-container.text-aside > div{width:33%;}

/*map panel*/

.metro-interactive .map-panel{
    position:relative;
    max-width:1800px;
    margin:0rem auto 6rem auto;
    border-top:1px solid #aaaaaa;
    padding-top:2rem;
}

.metro-interactive .map-panel > div{
    float:left;
    padding:0px;
    z-index:10;
    position:relative;
}

.metro-interactive .map-panel > div.map-main-panel{
    width:65%;
}

.metro-interactive .map-panel > div.map-multiples-panel{
    width:10%
}

.metro-interactive .map-panel > div.map-multiples-panel > div{
    position:relative;
    border:1px solid #fafafa;
    border-color: #dddddd;
    border-radius:5px;
    background-color:#dddddd;
}

.metro-interactive .map-panel > div.map-multiples-panel > div:hover{
    border-color: #dddddd;
}
.metro-interactive .map-panel > div.map-multiples-panel > div.selected-map{
    border-color: #aaaaaa;
    background-color:#ffffff
}

.metro-interactive .map-panel > div.map-multiples-panel div.button-top{
    position:absolute;
    z-index:10;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    pointer-events:all;
    cursor:pointer;
    background-color:transparent;
}



.metro-interactive .map-panel > div.map-text-panel{
    width:25%;
    padding-left:32px;
}

.metro-interactive .map-panel-buttons > div{
    float:left;
    padding:5px 13px;
    margin:5px 5px 5px 0px;
    cursor:pointer;
    border:1px solid #aaaaaa;
    background-color:#dddddd;
    border-radius:5px;
    opacity:0.6;
}
.metro-interactive .map-panel-buttons > div.button-selected{
    border-color:#aaaaaa;
    background-color:#ffffff;
    cursor:auto;
    opacity:1;
}

.metro-interactive .map-panel-buttons{
    margin-bottom:1em;
}

.metro-interactive .map-panel-buttons > div > p{
    margin:0px;
    font-size:13px;
    font-weight:bold;
    user-select:none;
}

.metro-interactive span, .metro-interactive a,
.metro-interactive strong, .metro-interactive em{
    font-size:inherit;
}

.metro-interactive .metro-monitor-dash p,
.metro-interactive .metro-monitor-dash li,
.metro-interactive .metro-monitor-dash text{
    font-size:16px;
}

.metro-interactive .metro-monitor-dash .dash-panel .ranking-card p{
    line-height:1.4em;
}

.metro-interactive .metro-monitor-dash .dash-panel .ranking-card{
    border-bottom:1px solid #aaaaaa;
    padding:10px 5px 10px 5px;
    margin:0px 0px;
    cursor:pointer;
}

.metro-interactive .metro-monitor-dash .dash-panel .ranking-card:hover{
    background-color:#e0e0e0;
    background: linear-gradient(#dddddd, #ffffff);
    padding-left:5px;
}

.metro-interactive .metro-monitor-dash .dash-panel .ranking-card:last-child{
    border-bottom:none;
}

.metro-interactive .metro-monitor-dash .dash-panel .ranking-card > div{
    float:left;
    width:25%;
}
.metro-interactive .metro-monitor-dash .dash-panel .ranking-card > div:first-child{
    width:75%;
}


.metro-interactive .metro-monitor-dash .dash-card-rank{
    font-size:16px;
    font-weight:bold;
    line-height:1em !important;
    padding:0.45em 0em;
    height:1.9em;
    width:1.9em;
    text-align:center;
    border-radius:0.95em;
    background-color:#dddddd;
    float:right;
}

.metro-interactive .metro-monitor-dash .overall-ranking-wrap{
    margin-top:10px;
}

.metro-interactive .metro-monitor-dash .dash-panel .dash-title-wrap{
    border-bottom:1px solid #aaaaaa;
    margin:5px 0px;
    padding:5px 5px 10px 0px;
}

.metro-interactive .metro-monitor-dash .dash-panel p{
    margin:0px;
}

.metro-interactive .axis-group text{
    font-family: "PT Serif", Times, serif;
    font-size:13px;
    color:#555555;
}

.metro-interactive .axis-group path,
.metro-interactive .axis-group line{
    stroke:#999999;
    shape-rendering:crispEdges;
}

.metro-interactive .legend-reference,
.metro-interactive .legend-selected{
    position:relative;
    margin:0px 5px 0px 15px;
}

.metro-interactive #dash-selects > div{
    float:left;
    margin:5px 15px 0px 0px;
}
.metro-interactive #dash-selects > div:last-child{
    margin-right:0px;
}

.metro-interactive select{
    margin:5px 5px 5px 0px;
    padding:5px 3px;
    border-radius:5px;
    border:1px solid #aaaaaa;
    font-size:13px;
    font-family: 'PT Serif', Times;
}

.metro-interactive .mobile-legend{
    display:block;
    width:100%;
    float:left;
}


@media screen and (min-width:0px){
    .metro-interactive .map-panel > div.map-main-panel,
    .metro-interactive .map-panel > div.map-multiples-panel,
    .metro-interactive .map-panel > div.map-text-panel,
    .metro-interactive .map-panel > div.map-panel-legend{
        float:none;
        width:auto;
        padding:0px;
    } 
    .metro-interactive .map-panel > div.map-main-panel{
        position:absolute;
        top:0px;
        left:0px;
        visibility:hidden;
        z-index:0;
    } 
    
    .metro-interactive .map-panel > div.map-multiples-panel > div{
        float:left;
        width:100%;
        margin:0em 0em 15px 0em;
        padding:10px;
        border-width:0px;
        background-color: #ffffff;
    }

    .metro-interactive .map-panel > div.map-multiples-panel div.button-top{
        cursor:auto;
    }

    .metro-interactive .map-panel .map-multiple .map-title{
        font-size:1rem;
    }

    .metro-interactive .category-headline{
        margin-top:8rem;
        padding:15px 0px 45px 0px;
    }

    .metro-interactive .ranking-wrap, .metro-interactive .trendline-wrap{
        float:none;
        width:auto;
    }

    .metro-interactive .metro-monitor-dash{
        max-width:800px;
    }

    .metro-interactive .metro-monitor-dash .dash-panel{
        float:none;
        width:auto;
        padding:15px 0px;
        margin:0px 0px 32px 0px;
    }

    .metro-interactive .dash-header > div{
        float:none;
        width:auto;
    }

}

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

    .metro-interactive .map-panel > div.map-multiples-panel{
        width:50%;
        float:left;
    }

    .metro-interactive .map-panel > div.map-multiples-panel > div{width:100%;}
    
    .metro-interactive .map-panel > div.map-text-panel{
        width:50%;
        padding-left:32px;
        float:right;
        clear:right;
    } 

    .metro-interactive .ranking-wrap{
        float:left;
        width:40%;
    }

    .metro-interactive .trendline-wrap{
        float:left;
        width:60%;
    }

    .metro-interactive .mobile-legend{
        display:block;
        width:50%;
        float:left;
    }

}

@media screen and (min-width:900px){
    .metro-interactive .map-panel > div.map-multiples-panel > div{width:50%;}


}

@media screen and (min-width:1200px){
    .metro-interactive .map-panel > div.map-main-panel{
        width:50%;
        float:left;
        position:relative;
        visibility:visible;
        z-index:10;
    }

    .metro-interactive .map-panel > div.map-main-panel{width:55%;}
    .metro-interactive .map-panel > div.map-multiples-panel{width:10%}
    .metro-interactive .map-panel > div.map-text-panel{width:35%;} 
    .metro-interactive .map-panel > div.map-panel-legend{padding-left:12%;}

    .metro-interactive .map-panel > div.map-multiples-panel > div{
        border-width:1px;
        border-color:#aaaaaa;
        background-color:#dddddd;
        width:100%;
        opacity:0.6;
    }

    .metro-interactive .map-panel > div.map-multiples-panel div.button-top{
        cursor:pointer;
    }

    .metro-interactive .map-panel > div.map-multiples-panel > div.selected-map div.button-top{
        cursor:auto;
    }

    .metro-interactive .map-panel > div.map-multiples-panel > div.selected-map{
        border-color: #aaaaaa;
        background-color:#ffffff;
        opacity:1
    }

    .metro-interactive .map-panel .map-multiple .map-title{
        font-size:13px;
    }

    .metro-interactive .category-headline{
        padding:15px 15px 45px 13%;
    }

    .metro-interactive .metro-monitor-dash{
        max-width:1600px;
    }    

    .metro-interactive .metro-monitor-dash .dash-panel{
        float:left;
        width:50%;
        padding:15px 7% 15px 0px;
        margin:0px;
    }
    .metro-interactive .metro-monitor-dash .dash-panel:nth-child(odd){
        padding:15px 4% 15px 10px;
    }

    .metro-interactive .metro-monitor-dash .dash-panel:nth-child(even){
        padding:15px 10px 15px 4%;
    }

    .metro-interactive .dash-header > div:first-child{
        float:left;
    }
    .metro-interactive .dash-header > div{
        float:right;
    }

    .metro-interactive .mobile-legend{
        display:none;
    }
}

@media screen and (min-width:1600px){
    .metro-interactive .map-panel > div.map-main-panel{width:65%;}
    .metro-interactive .map-panel > div.map-multiples-panel{width:10%}
    .metro-interactive .map-panel > div.map-text-panel{width:25%;} 
    .metro-interactive .map-panel > div.map-panel-legend{padding-left:12%;}
}